dojo1.9.0 表格分页 所属分类 :[界面编程]| 创建时间 :2014-05-21| 文章属性 :原创| 文章来源 :http://windfly.cn| 作者 :windfly 基本思路和步骤 使用EnhancedGrid表格 使用pagination插件 使用Quer
dojo1.9.0 表格分页
所属分类:[界面编程] | 创建时间:2014-05-21 | 文章属性:原创 | 文章来源:http://windfly.cn | 作者:windfly基本思路和步骤
- 使用EnhancedGrid表格
- 使用pagination插件
- 使用QueryReadStore数据源
注意点
- 一般业务都是服务端分页,这时只能使用QueryReadStore数据源,他会在每次请求时加上固定的start开始下标和count每页条数这两个参数
- 使用表格的autoHeight属性并配合layout来做,可以使表格和边框非常温和,在改变页面大小时,不会出现白边的情况
模板代码
定义表格
<div id="maingrid"></div>
脚本
require(["dojo/data/ItemFileReadStore", "dojo/parser", "dojox/grid/EnhancedGrid", "dijit/registry", "dojox/grid/enhanced/plugins/Pagination" "dojo/domReady!" ], function(ItemFileReadStore, Parser, EnhancedGrid, registry) { var mainlayout = [ { cells: [ {field: "name", name: "状态", datatype: "string", width: '10%'} ] } ]; var mainplugins = { pagination: {pageSizes: [], description: true, sizeSwitch: true, pageStepper: true, gotoButton: true, maxPageStep: 10, position: "bottom", defaultPage: 1, defaultPageSize: 5} }; var url = "/test.action" var maingridStore = new dojox.data.QueryReadStore({url: url}); var grid = new EnhancedGrid({ structure: "mainlayout", noDataMessage: "无数据", plugins: mainplugins, canSort: "false", selectionMode: "single", autoHeight: "true", store: maingridStore }, "maingrid"); grid.startup(); }
服务器返回什么呢?
msg.put("identifier", "id"); msg.put("label", "name");
msg.put("numRows", page.getTotalCount()); //这里比较关键,可以配合pagination插件实现enhancedGrid的服务器端分页效果。</span>
msg.put("items", page.getData());