凝望长空 发表于 2011-12-13 23:09

Jquery EasyUI combogrid 分页

Jquery EasyUI combogrid 分页












最近自己研究了EasyUI combogrid,并实现的其分页。发现网上的资料很少,所以发一份自己的demo上来,这里只给出关键的代码。

效果:

前台JS:



Javascript代码1.$('#shopId').combogrid({
2.                  panelWidth:400,
3.                  idField:'id', //ID字段
4.                  textField:'name', //显示的字段
5.                  url:"management/commodityCheck/check_doShopsBySid",
6.                  fitColumns: true,
7.                  striped: true,
8.                  editable:true,
9.                  pagination : true,//是否分页
10.                  rownumbers:true,//序号
11.                  collapsible:false,//是否可折叠的
12.                  fit: true,//自动大小
13.                  pageSize: 10,//每页显示的记录条数,默认为10
14.                  pageList: ,//可以设置每页记录条数的列表
15.                  method:'post',
16.                  columns:[[
17.                        {field:'name',title:'店铺名称',width:150},
18.                        {field:'registtime',title:'注册时间',width:150}
19.                  ]]
20.                });
后台Action



Java代码1.private int page; //当前页,名字必须为page
2.private int rows ; //每页大小,名字必须为rows
3.
4.private Map<String, Object> typeUsers;
5./**
6.   * AJAX 分页查询所有的供货商
7.   */
8.public String findProducters() {
9.    typeUsers=userCheckSvc.findProducters(page,rows);
10.    return "combogridjson";
11.}
12.
13.public Map<String, Object> getTypeUsers() {
14.    return typeUsers;
15.}
16.public int getPage() {
17.    return page;
18.}
19.public void setPage(int page) {
20.    this.page = page;
21.}
22.public int getRows() {
23.    return rows;
24.}
25.public void setRows(int rows) {
26.    this.rows = rows;
27.}
service实现层



Java代码1.@Override
2.public Map<String,Object> findProducters(int page,int rows) {
3.   Map<String,Object> result = new HashMap<String,Object>();
4.   List<User> productList = um.queryByType(page,rows);
5.   int count = um.totleQueryByType();
6.   result.put("total", count);
7.   result.put("rows", productList);   
8.}struts配置



Xml代码1.<!-- 商品审核 -->
2.<package name="commodityCheck" extends="wsfk-management" namespace="/management/commodityCheck">
3.    <action name="check_*" class="com.huaxin.shopping.management.commodity.CommodityCheckAction" method="{1}">
4.      <result name="combogridjson" type="json">
5.            <param name="root">shops</param>
6.      </result>
7.    </action>
8.</package>总结:
1.在jquery.easyUI.js 要实现分页,必须在后台action中声明两个变量:page(当前第几页),rows(每页显示多少条信息),否者easyUI前台传递不了分页参数。这两个属性不能该名字,因为在easyUI里面定义死了。
2.返回的时候,要返回Map类型的,map结果集里面put两个属性:1.totle(总过有几页),2.rows(查询到的结果集)

向上吧少年 发表于 2011-12-20 16:34

希望于楼主多多交流哦
页: [1]
查看完整版本: Jquery EasyUI combogrid 分页