`

DWR中util.js处理表格

    博客分类：
  • DWR
DWRJavaScriptXHTMLHTML 
阅读更多

util.js测试一（动态添加表格），使用dwr.util.addRows(tableId,array,funArray,[option]) 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>util.js测试一（动态添加表格）</title>
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script src="js/util.js" type="text/javascript"></script>
	</head>
	<body>
		<table width="400" border="1">
			<tr>
				<th>
					城市
				</th>
				<th>
					国家
				</th>
				<th>
					洲
				</th>
			</tr>
			<tbody id="test"></tbody>
		</table>
		<input type="button" value="添加行" onclick="add();"/>
		<input type="button" value="删除行" onclick="del();"/>
		<script type="text/javascript">
			//定义一个字符串数组，每个数组元素对应表格一行
			var rowArr = [ '广州', '华盛顿', '伦敦' ];
			//定义一个函数数组，每个函数对于表格内的一列
			var cellfuncs = [ function(data) {
				return data;
			}, function(data) {
				if (data == '广州')
					return '中国';
				if (data == '华盛顿')
					return '美国';
				if (data == '伦敦')
					return '英国';
			}, function(data) {
				if (data == '广州')
					return '亚洲';
				if (data == '华盛顿')
					return '欧洲';
				if (data == '伦敦')
					return '欧洲';
			} ];
			//为表格增加行
			function add() {
				dwr.util.addRows("test", rowArr, cellfuncs);
			}
			//删除表格内的所有行
			function del() {
				dwr.util.removeAllRows("test");
			}
		</script>
	</body>
</html>
 util.js测试二（动态添加表格） 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>util.js测试二（动态添加表格）</title>
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script src="js/util.js" type="text/javascript"></script>
	</head>
	<body>
		<table width="400" border="1">
			<tr>
				<th>
					国家
				</th>
				<th>
					城市一
				</th>
				<th>
					城市二
				</th>
				<th>
					城市三
				</th>
			</tr>
			<tbody id="test"></tbody>
		</table>
		<input type="button" value="添加行" onclick=add();; />
		<input type="button" value="删除行" onclick=del();; />
		<script type="text/javascript">
			//定义一个二维数组，用于在表格中输出
			var rowArr = [ [ '中国城市：', '广州', '上海', '北京' ],
					[ '美国城市：', '加州', '华盛顿', '纽约' ], [ '英国城市：', '利物浦', '伦敦', '伯明翰' ] ];
			var cellfuncs = [
					//表格函数，每个函数对应表格的一列。
					//系列函数的data都是rowArr数组的元素——每个数组元素都是一维数组
					function(data) {
						return data[0];
					}, function(data) {
						return data[1];
					}, function(data) {
						return data[2];
					}, function(data) {
						return data[3];
					} ];
			//添加表格行
			function add() {
				dwr.util.addRows("test", rowArr, cellfuncs);
			}
			function del() {
				dwr.util.removeAllRows("test");
			}
		</script>
	</body>
</html>
 util.js测试三（动态添加表格），使用dwr.util.addRows(tableId,array,funArray,[option])，使用第四个参数 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>util.js测试</title>
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script src="js/util.js" type="text/javascript"></script>
	</head>
	<body>
		<table width="400" border="1">
			<tr>
				<th>
					国家
				</th>
				<th>
					城市一
				</th>
				<th>
					城市二
				</th>
				<th>
					城市三
				</th>
			</tr>
			<tbody id="test"></tbody>
		</table>
		<input type="button" value="添加行" onclick=add();; />
		<input type="button" value="删除行" onclick=del();; />
		<script type="text/javascript">
			//定义一个二维数组，用于在表格中输出
			var rowArr = [ [ '中国城市：', '广州', '上海', '北京' ],
					[ '美国城市：', '加州', '华盛顿', '纽约' ], [ '英国城市：', '利物浦', '伦敦', '伯明翰' ] ];
			var cellfuncs = [
					//表格函数，每个函数对应表格的一列。
					//系列函数的data都是rowArr数组的元素——每个数组元素都是一维数组
					function(data) {
						return data[0];
					}, function(data) {
						return data[1];
					}, function(data) {
						return data[2];
					}, function(data) {
						return data[3];
					} ];
			//创建表格的高级选项
			var option = {
				//指定rowCreator
				rowCreator:function(options){
					var row = document.createElement("tr");
					if(options.rowNum % 2 == 0){
						row.style.backgroundColor = "#bbbbbb";
					}
					return row;
				}
			}
			//添加表格行
			function add() {
				dwr.util.addRows("test", rowArr, cellfuncs , option);
			}
			function del() {
				dwr.util.removeAllRows("test");
			}
		</script>
	</body>
</html>
 

分享到：
| DWR中的util.js的使用----处理表格
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    dwr util.js

    在DWR框架中，`util.js`是一个核心组件，主要负责提供各种实用工具函数，便于开发者在前端进行操作。本文将深入探讨`util.js`的特性和功能，并结合提供的`dwr_util_api.docx`文档，详细介绍其使用方法。 1. **DWR...

    DWR（包括engine.js+util.js）.rar

    这个压缩包包含了DWR的核心组件`engine.js`和辅助库`util.js`，它们是实现DWR功能的关键。 `engine.js`是DWR的核心脚本，它实现了JavaScript和Java之间的远程调用（Remote Procedure Calls, RPC）。这个文件处理了...

    dwr.jar engine.js util.js,Dwr相关

    "engine.js"是DWR的客户端引擎文件，它包含了一组JavaScript库，使得在浏览器中可以轻松地调用服务器端的Java方法。这个文件应该被包含在Web页面中，以便Web应用能够利用DWR的功能。`engine.js`提供了诸如对象转换、...

    DWR util.js 学习笔记 整理

    DWR util.js 是一个功能强大的 JavaScript 库，它提供了许多有用的函数，可以帮助开发者在客户端页面上实现各种操作。下面是对 DWR util.js 的学习笔记整理。 1. $() 函数 DWRUtil 中的 $() 函数用于获取页面参数...

    DWR util.js学习笔记.doc

    DWR util.js 学习笔记 DWR util.js 是一个JavaScript工具库，提供了一些有用的函数，用于在客户端页面调用。...DWR util.js为我们提供了一些有用的函数，帮助我们更方便地处理表单、下拉框、表格等控件。

    dwr城市选择的联动，util.js方法的使用，动态table

    在DWR的上下文中，我们可以在服务器返回数据后，利用`util.js` 中的方法创建新的表格行或单元格，然后插入到表格中。 例如，一个简单的示例可能是： ```javascript // 假设provinceDwr是服务器端返回的省份数据 ...

    软件工程DWR入门教程.docx

    在上述示例中，我们定义了两个类——`java.util.Date`和用户自定义的`your.java.Bean`，它们可以通过JavaScript访问。 ### 3. 访问DWR服务 通过浏览器访问`http://localhost:8080/[YOUR-WEBAPP]/dwr/`，你将看到...

    dwr填充表格示例dwr填充表格示例dwr填充表格示例

    - 使用DWR的API，如`util.createCall`和`util.execute`来调用服务器上的`getTableData`方法，并将返回的数据填充到表格中。 ```javascript var tableBody = document.getElementById('tableBody'); ...

    DWR 处理各种form表单Selectoption,table.doc

    在 DWR 中，util.js 是一个核心文件，包含了一些有用的函数，用于在客户端页面调用。这些函数可以帮助开发者快速地处理各种 form 表单 Select/option 和 table。 下面是 util.js 中的一些重要函数： 1. $() 函数：...

    Practical.DWR.2.Projects

    2. **API接口**: DWR 提供了一套简单的API，包括`Call`类用于发起服务器调用，`Util`类提供了一些通用的JavaScript工具函数，以及`RemoteObject`类用于处理对象的序列化和反序列化。 3. **安全性**: DWR 2 引入了更...

    dwr五个例子.rar

    - `dwr.engine.js`和`dwr.util.js`：这两个JavaScript文件是DWR的核心库，提供与服务器交互的API。 3. **Java对象和JavaScript的交互**： - `RemoteObject`：DWR中的核心概念，表示在服务器上的Java对象。在...

    dwrUtil用法--更好的开发Ajax

    Direct Web Remoting (DWR) 是一种用于在Web应用程序中实现AJAX功能的库，它允许JavaScript和服务器端Java代码之间进行交互。在提供的描述中，我们看到了几个DWRUtil工具类的一些用法，这个工具类提供了许多方便的...

    dwr的相关js，需要请下载

    `util.js`提供了DWR的一系列辅助工具函数，帮助开发者进行常见的DOM操作、数据转换和异常处理等。这些工具函数可以提高代码的可读性和可维护性，减轻开发者的工作负担。 4. **ECMAScript**： DWR基于ECMAScript...

    dwr.jar 以及dwr配置文件

    Direct Web Remoting (DWR) 是一个开源的Java库，它允许在JavaScript和服务器端Java之间进行双向通信，实现Web应用程序的Ajax功能。DWR使得动态网页能够与后台服务器进行实时交互，无需刷新整个页面，提高了用户体验...

    dwr笔记 dwr自学资料

    4. **Ajax API**：为JavaScript提供了一组API，如`dwr.engine.remote.execute()`用于调用服务器方法，`dwr.util.*`提供了数据操作和类型转换的工具。 四、DWR的使用步骤 1. **引入依赖**：在项目中添加DWR库。 2. *...

    DWR框架的使用.pdf

    - **数据处理**：DWR返回的数据可以是JSON格式，易于在JavaScript中处理。在示例中，`queryAll`方法返回的用户列表通过`$.each`遍历，然后动态生成HTML表格行并追加到表格中。 4. **优点** - **简化开发**：DWR...

    ajax框架Dwr的具体使用步骤

    在`.jsp`页面中，需要引入DWR的JavaScript库，如`engine.js`、`util.js`以及接口定义文件`GetDwr.js`。`GetDwr.js`是由DWR自动生成的，包含了服务器端`GetDwr`类的JavaScript接口。然后，可以编写JavaScript函数，...

    用SSH2+DWR做的表格

    1. **前端准备**：在HTML页面中，创建一个表格元素，并使用JavaScript（可能是jQuery或其他库）绑定DWR事件，如`dwr.util.useLoadingMessage`来显示加载状态。 2. **DWR配置**：在服务器端，配置DWR引擎，指定哪些...

    DWR基础教程及配置.doc

    通过这些示例，你可以了解如何在JavaScript中调用Java方法，以及如何处理返回的数据。 在编写DWR应用时，需要注意避免使用JavaScript的保留关键字作为方法或变量名，因为这可能导致解析错误。同时，由于JavaScript...

Magicbox
Global site tag (gtag.js) - Google Analytics