昨天凌晨时间，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这个分页插件的配置参数如下：
效果：
整个分页配置非常简单，现学现卖^_^。
本文转自左正博客园博客，原文链接：http://www.cnblogs.com/soundcode/archive/2011/07/26/2117528.html，如需转载请自行联系原作者
