DWR中util.js处理报表 _JavaScript

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-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>