日期:2014-05-16  浏览次数:20335 次

DWR中util.js处理表格

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