Dojo EnhancedGrid Pagination

昨天凌晨时间，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");
05
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' });
09
10   // set the layout structure:
11   var layout = [
12     { field: 'Title', name: 'Title of Movie', width: '200px' },
13     { field: 'Year', name: 'Year', width: '50px' },
14     { field: 'Producer', name: 'Producer', width: 'auto' }
15   ];
16
17   // create a new grid:
18   var grid = new dojox.grid.EnhancedGrid({
19     store: store,
20     structure: layout,
21     plugins : {
22     }
23   }, document.createElement('div'));
24
25   // append the new grid to the div "gridContainer4":
26   dojo.byId("gridDiv").appendChild(grid.domNode);
27
28   // Call startup, in order to render the grid:
29   grid.startup();
30 });
31 </script>

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";
6 </style>

dojo这个分页插件的配置参数如下：

效果：

整个分页配置非常简单，现学现卖^_^。