Dojo EnhancedGrid Pagination

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

   js code：   

view source print ?

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：

view source print ?

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

css code：

view source print ?

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这个分页插件的配置参数如下：

效果：

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