最近自己研究了EasyUI combogrid,并实现的其分页。发现网上的资料很少,所以发一份自己的demo上来,这里只给出关键的代码。
效果:
前台JS:
$('#shopId').combogrid({
panelWidth:400,
idField:'id', //ID字段
textField:'name', //显示的字段
url:"management/commodityCheck/check_doShopsBySid",
fitColumns: true,
striped: true,
editable:true,
pagination : true,//是否分页
rownumbers:true,//序号
collapsible:false,//是否可折叠的
fit: true,//自动大小
pageSize: 10,//每页显示的记录条数,默认为10
pageList: [10],//可以设置每页记录条数的列表
method:'post',
columns:[[
{field:'name',title:'店铺名称',width:150},
{field:'registtime',title:'注册时间',width:150}
]]
});
后台Action
private int page; //当前页,名字必须为page
private int rows ; //每页大小,名字必须为rows
private Map<String, Object> typeUsers;
/**
* AJAX 分页查询所有的供货商
*/
public String findProducters() {
typeUsers=userCheckSvc.findProducters(page,rows);
return "combogridjson";
}
public Map<String, Object> getTypeUsers() {
return typeUsers;
}
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public int getRows() {
return rows;
}
public void setRows(int rows) {
this.rows = rows;
}
service实现层
@Override
public Map<String,Object> findProducters(int page,int rows) {
Map<String,Object> result = new HashMap<String,Object>();
List<User> productList = um.queryByType(page,rows);
int count = um.totleQueryByType();
result.put("total", count);
result.put("rows", productList);
}
struts配置
<!-- 商品审核 -->
<package name="commodityCheck" extends="wsfk-management" namespace="/management/commodityCheck">
<action name="check_*" class="com.huaxin.shopping.management.commodity.CommodityCheckAction" method="{1}">
<result name="combogridjson" type="json">
<param name="root">shops</param>
</result>
</action>
</package>
总结:
1.在jquery.easyUI.js 要实现分页,必须在后台action中声明两个变量:page(当前第几页),rows(每页显示多少条信息),否者easyUI前台传递不了分页参数。这两个属性不能该名字,因为在easyUI里面定义死了。
2.返回的时候,要返回Map类型的,map结果集里面put两个属性:1.totle(总过有几页),2.rows(查询到的结果集)
分享到:
相关推荐
asyUI ComboGrid 集成分页、按键示例源码 源码描述: 实现的功能: 1、下拉框下拉时出现表格; 2、表格带分页功能; 3、可以使用向上键、向下键在表格中移动选择行数据; 4、可以使用回车键在表格中选中行数据; 5、...
本篇文章主要介绍了easyui combogrid实现本地模糊搜索过滤多列,非常具有实用价值,需要的朋友可以参考下
jquery easyUI 分页问题文档
jquery EasyUI的API,方便使用easyui查看。。。。。。
jqueryEasyUI 下载,及api下载 jqueryEasyUI 下载,及api下载
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
两种扩展方式,自己看情况选择,重写的分页属性。
jquery easyui 帮助文档 非常好用的
jquery easyui中的combogrid比较特殊,算是combo和grid的组合,combogrid结合一个可编辑的文本框和下拉数据网格面板,可以让用户迅速找到并选择,又可以进行搜索,展示与当前输入的字符相匹配的数据。下面给大家介绍...
easyui combogrid 本地模糊搜索过滤多列问题,完善点击复选框无法选中数据的问题
jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档...
谁在jquery easyUI 下做过动态生成多条件查询功能,动态添加一行(一个条件):参数名(多个字段名)、关系符(>、<、>=、、=)、比较值(input)。大体就这样,点击“添加条件”,生成上面描述的一行,这个在jquery...
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
资源名称:Jquery easyui 使用说明内容简介:Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的...
jQuery EasyUI 1.4.3 API 中文 jQuery EasyUI 1.4.3 API jQuery EasyUI 1.4.3 API
jQuery EasyUI EasyUI 组件范例
jQuery EasyUI 1.4.2 版 API 中文版手册
jQuery EasyUI 1 4版本更新内容: Bug(修复) menu:修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题; datagrid:修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...
jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档