`

DWR中util.js处理表格

    博客分类:
  • DWR
阅读更多

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`是一个核心组件,主要负责提供各种实用工具函数,便于开发者在前端进行操作。本文将深入探讨`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...

Global site tag (gtag.js) - Google Analytics