昨天凌晨時間，Dojo的Grid分頁插件低調上線，對于使用dojo作為項目前端來說，是個利好消息。悲催的是這個分頁插件并不在dojo 1.5 realase中。而在dojo的孵化器系列中http://archive.dojotoolkit.org/nightly。直接上例子。

?? js code： ??

view sourceprint?

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 sourceprint?

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

css code：

view sourceprint?

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這個分頁插件的配置參數如下：

效果：

整個分頁配置非常簡單，現學現賣^_^。

總結

以上是生活随笔為你收集整理的Dojo EnhancedGrid Pagination的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。