`

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_api.docx`文档详细列出了`util.js`中的所有函数，每个函数都有详细的参数说明、返回值和使用示例。通过这份文档，开发者可以快速查找和理解所需的函数，从而高效地使用DWR进行开发。 例如，`util....

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

    为了使用DWR，开发者需要在服务器端配置DWR引擎，定义允许访问的Java类和方法，并在客户端引入`engine.js`和`util.js`。然后，通过JavaScript代码就可以直接调用服务器端的方法，实现双向通信。 总之，DWR提供了一...

    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

    在Web应用中使用DWR - **示例和代码**：DWR的官方文档提供了许多示例，演示如何在页面上动态更新文本、列表、表单以及表格内容。每个示例都附带了详细的实现说明。 - **生成的JavaScript**：你可以查看DWR自动...

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

    DWR (Direct Web Remoting) 是一个开源JavaScript库，它允许Web应用程序在客户端与服务器之间进行实时、异步通信...同时，确保在安全环境中使用DWR，因为它可以执行服务器上的任何公开方法，这可能带来潜在的安全风险。

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

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

    DWR框架的使用.pdf

    - **引入JavaScript库**：在JSP页面中，引入DWR的JavaScript库文件，如`engine.js`和`util.js`，以及自动生成的Java接口文件（如`udao.js`）。同时，可能还需要引入其他JavaScript库，如jQuery，以便进行更丰富的...

    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入门教程

    在你的Web应用中使用DWR 要将DWR集成到你的Web应用中，你需要在HTML或JSP页面中引入DWR生成的JavaScript接口文件和引擎文件： ```html [YOUR-WEBAPP]/dwr/interface/[YOUR-SCRIPT].js'&gt; [YOUR-WEBAPP]/dwr/engine...

    Practical.DWR.2.Projects

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

    dwr教程的开发

    要在你的Web应用中使用DWR，你可以在HTML或JSP页面中引用DWR生成的JavaScript文件和核心引擎文件： ```html [YOUR-WEBAPP]/dwr/interface/[YOUR-SCRIPT].js'&gt; [YOUR-WEBAPP]/dwr/engine.js'&gt; ``` 替换`[YOUR-...

    ajax框架Dwr的具体使用步骤

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

    dwr.jar 以及dwr配置文件

    使用DWR，开发者可以方便地创建动态Web应用，比如实时更新表格、图表、地图等，而无需繁琐的HTTP请求和响应处理。同时，DWR提供了丰富的API和工具，简化了前后端的交互流程，提高了开发效率。 在实际项目中，将dwr....

    DWR基础教程及配置.doc

    `&lt;create&gt;`标签用于创建一个Java对象，`javascript`属性指定了在JavaScript中使用的对象名称。`creator`属性指定了创建对象的方式，如`new`表示使用无参构造函数创建。`param`标签用于传递构造函数参数或设置其他...

    dwr的相关js，需要请下载

    在前端开发中，DWR扮演着重要角色，它使得开发者可以使用JavaScript编写更加动态和交互性强的页面，而无需刷新整个页面。这极大地提升了用户体验，因为用户可以实时看到服务器端计算的结果，而无需等待页面完全重新...

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