昨天凌晨时间，Dojo的Grid分页插件低调上线，对于使用dojo作为项目前端来说，是个利好消息。悲催的是这个分页插件并不在dojo 1.5 realase中。而在dojo的孵化器系列中http://archive.dojotoolkit.org/nightly。直接上例子。
js code：
01 |
<script type="text/javascript">
|
02 |
dojo.require("dojox.grid.EnhancedGrid");
|
03 |
dojo.require("dojox.grid.enhanced.plugins.Pagination");
|
04 |
dojo.require("dojox.data.CsvStore");
|
06 |
dojo.addOnLoad(function(){
|
07 |
// our test data store for this example:
|
08 |
var store = new dojox.data.CsvStore({ url: '{{ dataUrl }}dojox/grid/tests/support/movies.csv' });
|
10 |
// set the layout structure:
|
12 |
{ field: 'Title', name: 'Title of Movie', width: '200px' },
|
13 |
{ field: 'Year', name: 'Year', width: '50px' },
|
14 |
{ field: 'Producer', name: 'Producer', width: 'auto' }
|
18 |
var grid = new dojox.grid.EnhancedGrid({
|
23 |
}, document.createElement('div'));
|
25 |
// append the new grid to the div "gridContainer4":
|
26 |
dojo.byId("gridDiv").appendChild(grid.domNode);
|
28 |
// Call startup, in order to render the grid:
|
html code：
1 |
<div id="gridDiv" style="width: 100%; height: 100%;"></div>
|
css code：
1 |
<style type="text/css">
|
2 |
@import "{{ baseUrl }}dojo/resources/dojo.css";
|
3 |
@import "{{ baseUrl }}dijit/themes/{{ theme }}/{{ theme }}.css";
|
4 |
@import "{{ baseUrl }}dojox/grid/enhanced/resources/{{ theme }}EnhancedGrid.css";
|
5 |
@import "{{ baseUrl }}dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";
|
dojo这个分页插件的配置参数如下：
效果：
整个分页配置非常简单，现学现卖^_^。
本文转自左正博客园博客，原文链接：http://www.cnblogs.com/soundcode/archive/2011/07/26/2117528.html，如需转载请自行联系原作者
