最近自己研究了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、...
jquery easyui中的combogrid比较特殊,算是combo和grid的组合,combogrid结合一个可编辑的文本框和下拉数据网格面板,可以让用户迅速找到并选择,又可以进行搜索,展示与当前输入的字符相匹配的数据。下面给大家介绍...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,如对话框、表格、下拉菜单、树形结构等,帮助开发者快速构建用户界面。1.4.5 版本是该框架的一个稳定版本,其API中文版对于国内开发者...
这个框架的官方API中文版是开发者的重要参考资料,它详细解释了每个组件的用法、属性、方法和事件,使得国内开发者能够更加方便地理解和使用jQuery EasyUI。 首先,我们要理解jQuery EasyUI的核心概念。它主要基于...
本 chm 文档是根据博客园“风流涕淌”的《jQuery EasyUI 1.2.4 API 中文文档(完整)目录》整理而成 http://www.cnblogs.com/Philoo/archive/2011/11/17/jeasyui_api_index.html Base 基础 Documentation 文档 ...
easyUI是一个基于jQuery的用户界面插件集合,它提供了丰富的UI组件,帮助开发者快速创建交互式Web应用。其中,datagrid是easyUI中最常用的一个组件,用于展示表格数据,支持排序、分页、过滤等功能。对于需要动态...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,如对话框、表格、下拉菜单等,帮助开发者快速构建用户界面。版本 1.5.1 是其一个重要版本,带来了丰富的功能和改进。这个压缩包包含了...
### 关于jQuery EasyUI 1.4.5版API中文文档 #### 1.1 文档说明 **jQuery EasyUI** 是一个基于 jQuery 的 UI 库,它提供了一套丰富的用户界面组件,使得开发者能够快速地构建出具有高度交互性的网页应用。此文档为 ...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了一系列易于使用的组件,如对话框、表格、菜单、按钮等。1.4.1 版本是其稳定的一个版本,包含了丰富的功能和优化。API 中文版为开发者...
EasyUI是一种基于jQuery的前端框架,它为开发人员提供了一套丰富的UI组件,以帮助快速构建现代化、交互式的Web应用。jQuery EasyUI中文帮助手册是一个全面的指导文档,它详细介绍了EasyUI框架的各种组件以及如何使用...
### jQuery EasyUI 知识点详解 #### 一、概述 **jQuery EasyUI** 是一个基于 jQuery 的前端 UI 框架,它提供了一系列丰富的用户界面插件,可以帮助开发者快速构建复杂的 Web 应用程序。该框架的目标是简化 HTML、...
1. **jQuery EasyUI combogrid 刷新数据** 当你需要实时更新 combogrid 中的数据时,可以使用 `datagrid('load')` 方法来刷新网格。例如: ```javascript $("#cc").combogrid('grid').datagrid('load'); ``` 这...
数据表格下拉框 - ComboGrid 树形下拉框 - ComboTree 日期输入框 - DateBox 日期时间输入框 - DateTimeBox 数字输入框 - NumberBox 格式化数字输入框 - Format NumberBox 数字调节器 - NumberSpinner ...
**jQuery EasyUI** 是一个基于 jQuery 的前端框架,它提供了丰富的UI组件,使得开发者能够快速构建功能完善的后台管理系统。这个框架极大地简化了网页开发过程,让开发者可以专注于业务逻辑,而不是繁琐的界面实现。...
下拉数据网格(Combogrid)组件和下拉框... 下拉数据网格(Combogrid)组件可以过滤、分页,并具有其他一些数据网格(Datagrid)的功能。 本教程向您展示如何在一个下拉数据网格(Combogrid)组件中过滤数据记录。
使用jQuery easyUI 创建一个 RSS Feed阅读器 Drag and Drop easyUI 基础的拖动和放置 使用easyUI创建一个拖放的购物车 使用easyUI创建一个课程表 Menu and Button 使用easyUI创建简单的菜单 使用easyUI...
jQuery+EasyUI+1.2.4+API+中文文档,有时间好好看一下,目录如下: Base 基础 Documentation 文档 Parser 解析器 EasyLoader 加载器 Draggable 可拖拽 Droppable 可释放 Resizable 可调整尺寸 Pagination...