改装的表格

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dojo表格分页</title>
<link rel=stylesheet href="../dojoroot/dojox/grid/tests/enhanced/support/common.css"/>
<style type="text/css">
body {
	font-size: 0.9em;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	padding-right: 10em;
}

.title {
	text-align: center;
	margin: 1em;
}

#grid {
	width: 100em;
	height: 30em;
}

#API-btn-grp {
	margin: 1em;
}
</style>
<script type="text/javascript" src="../dojoroot/dojo/dojo.js" data-dojo-config="isDebug:false, parseOnLoad: true"></script>
<script type="text/javascript" src="../dojoroot/dijit/tests/_testCommon.js"></script>
<script type="text/javascript">
		dojo.require("dojo.data.ItemFileWriteStore");
		dojo.require("dojox.grid.EnhancedGrid");
		dojo.require("dojox.grid.enhanced.plugins.Pagination");
		dojo.require("dojo.parser");
		
		var layout = [{
			cells: [
				{ field: "id", name:"Identity", datatype:"number", width: 4},
				{ field: "Genre", name:"Genre", datatype:"string", width: 10},
				{ field: "Artist", name:"Artist", datatype:"string", width: 10},
				{ field: "Year", name:"Year", datatype:"string", width: 2.5},
				{ field: "Album", name:"Album", datatype:"string", width: 10},
				{ field: "Name", name:"Name", datatype:"string", width: 8},
				{ field: "Length", name:"Length", datatype:"string", width: 4},
				{ field: "Track", name:"Track", datatype:"number", width: 3},
				{ field: "Composer", name:"Composer", datatype:"string", width: 12},
				{ field: "Download Date", name:"Download Date", datatype:"date", width: 12},
				{ field: "Last Played", name:"Last Played", datatype:"time", width: 6},
				{ field: "Heard", name: "Checked", datatype:"boolean", width: 6}
			]
		}];
		var plugins = {
			pagination: {
				pageSizes: [10, 15, 20, 25,30],  //每页可以显示10/15/20/25/30条记录
				description: true,	             //每页显示的记录从多少到多少,共多少条记录(true:显示,false:不显示)
				sizeSwitch: true,	             //显示每页显示多少条记录(中间部分 10|15|20|25|30)(true:显示,false:不显示)
				pageStepper: true,	             //显示首页、上一页、下一页、尾页按钮和页数(true:显示,false:不显示)
				gotoButton: true,	             //显示跳转按钮(向上的箭头)(true:显示,false:不显示)
				maxPageStep: 10,	             //最大页数跨度
				position: "bottom",              //分页插件默认的位置,bottom:表格下方,top:表格上方	
				defaultPage: 1, 	             //默认显示第几页 
				defaultPageSize: 15              //每页显示的记录数 
			}
		};
		
</script>
<script type="text/javascript" src="data.js"></script>
</head>
<body class="claro">
	<div id="gridContainer">
	    <span id="jsonStore"
	          url="data.json"
	          data-dojo-id="jsonStore"
	          data-dojo-type="dojo/data/ItemFileWriteStore"
	          >
	    </span>
	    <table id="gridData" query="{ id: '*' }"
		       store="jsonStore"
		       data-dojo-type="dojox/grid/EnhancedGrid">
	       <thead>
	           <tr>
	             <th field="name" name="国家"></th>
	             <th field="type" name="洲"></th>
	           </tr>
	       </thead>
	    </table>
		<div id="grid" dojoType="dojox.grid.EnhancedGrid" store="test_store[0]" structure="layout" plugins="plugins" summary="A customized grid summary"></div>
	</div>
</body>
</html>

你可能感兴趣的:(dojo)