Dojo EnhancedGrid Pagination

      昨天凌晨时间，Dojo的Grid分页插件低调上线，对于使用dojo作为项目前端来说，是个利好消息。悲催的是这个分页插件并不在dojo 1.5 realase中。而在dojo的孵化器系列中http://archive.dojotoolkit.org/nightly。直接上例子。

   js code：   

<script type="text/javascript">
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dojox.data.CsvStore");

dojo.addOnLoad(function(){
  // our test data store for this example:
  var store = new dojox.data.CsvStore({ url: '{{ dataUrl }}dojox/grid/tests/support/movies.csv' });

  // set the layout structure:
  var layout = [
    { field: 'Title', name: 'Title of Movie', width: '200px' },
    { field: 'Year', name: 'Year', width: '50px' },
    { field: 'Producer', name: 'Producer', width: 'auto' }
  ];

  // create a new grid:
  var grid = new dojox.grid.EnhancedGrid({
    store: store,
    structure: layout,
    plugins : {
    }
  }, document.createElement('div'));

  // append the new grid to the div "gridContainer4":
  dojo.byId("gridDiv").appendChild(grid.domNode);

  // Call startup, in order to render the grid:
  grid.startup();
});
</script>

 

html code：

 

<div id="gridDiv" style="width: 100%; height: 100%;"></div>

 

css code：

 

<style type="text/css">
@import "{{ baseUrl }}dojo/resources/dojo.css";
@import "{{ baseUrl }}dijit/themes/{{ theme }}/{{ theme }}.css";
@import "{{ baseUrl }}dojox/grid/enhanced/resources/{{ theme }}EnhancedGrid.css";
@import "{{ baseUrl }}dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";
</style>

 

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

效果：

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