改装的表格

<%@ 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",{ field: "Year",name:"Year",width: 2.5},{ field: "Album",name:"Album",{ field: "Name",name:"Name",width: 8},{ field: "Length",name:"Length",{ field: "Track",name:"Track",width: 3},{ field: "Composer",name:"Composer",width: 12},{ field: "Download Date",name:"Download Date",datatype:"date",{ 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相关文章
