Dojo异步数据和分页简单剖析

Dojo异步数据和分页简单剖析

Dojo 从 v1.0 开始引入了一个功能强大，快速，健壮的控件--Grid。Grid 在dojo的体系结构中属于Dojox 这个包中。这个Grid 比较灵活，可以排序，过滤，编辑，多表头，支持多种Cell 控件。要完成一个Grid，需要下面几个步骤，每个步骤都是必不可少的。

1、导入样式表

没有样式表，就无法显示漂亮的列表出来，你看到的将是丑陋的静态文本。

css 代码

1.  < style type="text/css">

2.   @import http://localhost/dojo/dojo/resources/dojo.css   

3.   @import http://localhost/dojo/dijit/themes/soria/soria.css

4.  @import "http://localhost/dojo/dojox/grid/resources/soriaGrid.css";    

5.  @import "http://localhost/dojo/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";

6.  @import "http://localhost/dojo/dojox/grid/enhanced/resources/EnhancedGrid.css";

7.  @import "http://localhost/dojo/dojox/grid/enhanced/resources/Pagination.css";

8.   < / style>  

2、Js引入

9.  dojo.require("dojox.grid.EnhancedGrid");

10.  dojo.require("dojox.grid.enhanced.plugins.Pagination");

11.  dojo.require("dojox.data.QueryReadStore"); 

12.  dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");

13.   dojo.require("dojo.parser");

3、数据源(store)

Grid的显示，数据源是必不可少的，本次为了采用异步获取数据源，使用dojox.data.QueryReadStore方法，具体使用代码如下：

1.  var store = new dojox.data.QueryReadStore({ 

2.                   url:'http://localhost:8080/grid',//请求服务的地址

3.                   requestMethod:"post"  //获取数据源的方式

4.                }); 

 

视图（View）

View 用来定义每个数据列，一个view是多个数据列的组合。通过定义view，使Grid按照要求来显示数据。下面是一个简单的view定义。

js 代码

5.  var view = [[  { 

6.                                 name: "角色名称", 

7.                                 field:"name", 

8.                                 //styles:"text-align:right;", 

9.                                 width: 30  

10.                             }, 

11.                             { 

12.                                 name: "所属部门", 

13.                                 field:"type", 

14.                                 width:'auto'

15.                                 //formatter:rs.chunk.adminUser.grid.formatUser 

16.                             }

17.           ]];   

 

4、分页插件(plugins)

dojo grid自带了分页控件dojox.grid.enhanced.plugins.Pagination，使用Pagination我们可以进行数据分页，他应用非常简单，代码如下:

18.  var plugins = {

19.     indirectSelection:{//checkbox选框

20.            headerSelector:true,

21.           name: "Selection",

22.           width:"30px",

23.           styles:"text-align: center;"

24.     },

25.      pagination: {

26.           pageSizes: [4, 8, 12, 16, 20, Infinity],//Array, custom the items per page button

27.           description: true,    // boolean, custom whether or not the description will bedisplayed

28.           sizeSwitch: true,     // boolean, custom whether or not the page size switch will bedisplayed

29.           pageStepper: true,    // boolean, custom whether or not the page step will be displayed

30.           gotoButton: true,     // boolean, custom whether or not the goto page button will bedisplayed

31.           maxPageStep: 10, // Integer, custom how many page step will be displayed

32.           position: "bottom",   // String, custom the position of thepagination bar. There're two options: top, bottom

33.           defaultPage: 1, // Integer, which page will be displayed by default

34.           defaultPageSize: 4 // Integer, what pagesize will be used by default

35.      }

36.  };

5、定义EnhancedGrid

37.  var grid = new dojox.grid.EnhancedGrid(dojo.mixin({

38.                      id:"grid1",

39.                      store:store,

40.                      structure:view,

41.                      plugins: plugins

42.                 },gridArgs));

43.                dojo.byId("gridContainer").appendChild(grid.domNode);

44.                 grid.startup();

6、写body

45.                <divid="gridContainer" style="height:100%;"></div>

7、后台参数获取

46.     Stringstart = request.getParameter("start");//每页的开始行数

47.     Stringcount = request.getParameter("count");//每页显示的条数

通过以上7个步骤我们就可以定义一个异步加载数据、分页、带复选框的grid，