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',  '200px' }, 

13
    { field: 'Year', name: 'Year',  '50px' }, 

14
    { field: 'Producer', name: 'Producer',  '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=" 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这个分页插件的配置参数如下：

效果：

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