改装的表格

前端之家收集整理的这篇文章主要介绍了改装的表格前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<%@ 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>
原文链接:https://www.f2er.com/dojo/291236.html

猜你在找的Dojo相关文章