dojo1.9.0 表格分页

前端之家收集整理的这篇文章主要介绍了dojo1.9.0 表格分页前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

dojo1.9.0 表格分页

所属分类:[界面编程]| 创建时间:2014-05-21| 文章属性:原创| 文章来源:http://windfly.cn| 作者:windfly

基本思路和步骤

  1. 使用EnhancedGrid表格
  2. 使用pagination插件
  3. 使用QueryReadStore数据源

注意点

  • 一般业务都是服务端分页,这时只能使用QueryReadStore数据源,他会在每次请求时加上固定的start开始下标和count每页条数这两个参数
  • 使用表格的autoHeight属性并配合layout来做,可以使表格和边框非常温和,在改变页面大小时,不会出现白边的情况

模板代码

定义表格

  1. <div id="maingrid"></div>
  2.  

脚本

  1. require(["dojo/data/ItemFileReadStore","dojo/parser","dojox/grid/EnhancedGrid","dijit/registry","dojox/grid/enhanced/plugins/Pagination"
  2. "dojo/domReady!"
  3. ],function(ItemFileReadStore,Parser,EnhancedGrid,registry) {
  4. var mainlayout = [
  5. {
  6. cells: [
  7. {field: "name",name: "状态",datatype: "string",width: '10%'}
  8. ]
  9. }
  10. ];
  11. var mainplugins = {
  12. pagination: {pageSizes: [],description: true,sizeSwitch: true,pageStepper: true,gotoButton: true,maxPageStep: 10,position: "bottom",defaultPage: 1,defaultPageSize: 5}
  13. };
  14. var url = "/test.action"
  15. var maingridStore = new dojox.data.QueryReadStore({url: url});
  16. var grid = new EnhancedGrid({
  17. structure: "mainlayout",noDataMessage: "无数据",plugins: mainplugins,canSort: "false",selectionMode: "single",autoHeight: "true",store: maingridStore
  18. },"maingrid");
  19. grid.startup();
  20. }
  1. 服务器返回什么呢?
  1. msg.put("identifier","id");
  2. msg.put("label","name");
  1. msg.put("numRows",page.getTotalCount()); //这里比较关键,可以配合pagination插件实现enhancedGrid的服务器端分页效果。</span>
  1. msg.put("items",page.getData());

猜你在找的Dojo相关文章