`
xinming_me
  • 浏览: 19011 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

Jquery EasyUI combogrid 分页

阅读更多
最近自己研究了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(查询到的结果集)
分享到:
评论
8 楼 haowanlisx 2012-10-27  
您好,请问为什么的翻页的那部分,直接把数据给盖住了,很宽很宽的
7 楼 joy_wu1984 2012-08-01  
你好,看了你的代码我获益匪浅,分页已经实现,但是有一个问题无法解决,通过combogrid的value属性可以设置select的默认值,但是当这个值不在第一页的时候就无法显示出来了,请问怎么能解决这个问题呢?
6 楼 abbqq12 2012-05-29  
abbqq12 写道
你好,小弟正在用这个做毕业设计。combogrid的下拉选项是从后台处获得,但是遇到一个问题,当数据源那边改变了的时候,怎么刷新ombogrid让它加载新的数据。

就好像datagrid提供一个load和reload的方法重新加载数据,但好像comboxgrid的方法不继承datagrid的方法,只继承了como。
5 楼 abbqq12 2012-05-29  
你好,小弟正在用这个做毕业设计。combogrid的下拉选项是从后台处获得,但是遇到一个问题,当数据源那边改变了的时候,怎么刷新ombogrid让它加载新的数据。
4 楼 辛金刚 2012-05-24  
辛金刚 写道
您好,我最近做项目想用这个插件, 测试总不能成功  请问可以把demon项目发给我参考么
QQ :574328911
email: xin483321@gmail.com

已经搞定了 action 所在package需继承自json-default
3 楼 辛金刚 2012-05-24  
您好,我最近做项目想用这个插件, 测试总不能成功  请问可以把demon项目发给我参考么
QQ :574328911
email: xin483321@gmail.com
2 楼 java_linkin 2012-04-23  
page 和 rows如何传值啊?
1 楼 binglinggongzhu 2012-02-14  
你好,我也在找这个相当的资料,实在是太少太少了,能发个相关文件的源码吗?
学习一下前台怎么写,怎么取值,后台如何传值。

xingye1005@126.com

谢谢!

相关推荐

    EasyUI ComboGrid 集成分页、按键示例

    asyUI ComboGrid 集成分页、按键示例源码 源码描述: 实现的功能: 1、下拉框下拉时出现表格; 2、表格带分页功能; 3、可以使用向上键、向下键在表格中移动选择行数据; 4、可以使用回车键在表格中选中行数据; 5、...

    EasyUi中的Combogrid 实现分页和动态搜索远程数据

    jquery easyui中的combogrid比较特殊,算是combo和grid的组合,combogrid结合一个可编辑的文本框和下拉数据网格面板,可以让用户迅速找到并选择,又可以进行搜索,展示与当前输入的字符相匹配的数据。下面给大家介绍...

    jQuery EasyUI 1.4.5 版 API 中文版.rar

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,如对话框、表格、下拉菜单、树形结构等,帮助开发者快速构建用户界面。1.4.5 版本是该框架的一个稳定版本,其API中文版对于国内开发者...

    jQuery EasyUI 官方API中文版

    这个框架的官方API中文版是开发者的重要参考资料,它详细解释了每个组件的用法、属性、方法和事件,使得国内开发者能够更加方便地理解和使用jQuery EasyUI。 首先,我们要理解jQuery EasyUI的核心概念。它主要基于...

    jQuery EasyUI 1.2.4 API 中文文档.chm

    本 chm 文档是根据博客园“风流涕淌”的《jQuery EasyUI 1.2.4 API 中文文档(完整)目录》整理而成 http://www.cnblogs.com/Philoo/archive/2011/11/17/jeasyui_api_index.html Base 基础 Documentation 文档 ...

    easyui的datagrid中editor和combogrid的结合使用

    easyUI是一个基于jQuery的用户界面插件集合,它提供了丰富的UI组件,帮助开发者快速创建交互式Web应用。其中,datagrid是easyUI中最常用的一个组件,用于展示表格数据,支持排序、分页、过滤等功能。对于需要动态...

    jQuery EasyUI 1.5.1 中文API文档(chm、exe、pdf)

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,如对话框、表格、下拉菜单等,帮助开发者快速构建用户界面。版本 1.5.1 是其一个重要版本,带来了丰富的功能和改进。这个压缩包包含了...

    jQuery EasyUI 1.4.5 版 API 中文.pdf

    ### 关于jQuery EasyUI 1.4.5版API中文文档 #### 1.1 文档说明 **jQuery EasyUI** 是一个基于 jQuery 的 UI 库,它提供了一套丰富的用户界面组件,使得开发者能够快速地构建出具有高度交互性的网页应用。此文档为 ...

    jQuery EasyUI 1.4.1 版 API 中文版

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了一系列易于使用的组件,如对话框、表格、菜单、按钮等。1.4.1 版本是其稳定的一个版本,包含了丰富的功能和优化。API 中文版为开发者...

    jQuery_EasyUI中文帮助手册(带目录)

    EasyUI是一种基于jQuery的前端框架,它为开发人员提供了一套丰富的UI组件,以帮助快速构建现代化、交互式的Web应用。jQuery EasyUI中文帮助手册是一个全面的指导文档,它详细介绍了EasyUI框架的各种组件以及如何使用...

    jQuery EasyUI

    ### jQuery EasyUI 知识点详解 #### 一、概述 **jQuery EasyUI** 是一个基于 jQuery 的前端 UI 框架,它提供了一系列丰富的用户界面插件,可以帮助开发者快速构建复杂的 Web 应用程序。该框架的目标是简化 HTML、...

    jquery easyui combox一些实用的小方法

    1. **jQuery EasyUI combogrid 刷新数据** 当你需要实时更新 combogrid 中的数据时,可以使用 `datagrid('load')` 方法来刷新网格。例如: ```javascript $("#cc").combogrid('grid').datagrid('load'); ``` 这...

    jQuery EasyUI 1.3 API 中文教程

    数据表格下拉框 - ComboGrid 树形下拉框 - ComboTree 日期输入框 - DateBox 日期时间输入框 - DateTimeBox 数字输入框 - NumberBox 格式化数字输入框 - Format NumberBox 数字调节器 - NumberSpinner ...

    jquery easyui

    **jQuery EasyUI** 是一个基于 jQuery 的前端框架,它提供了丰富的UI组件,使得开发者能够快速构建功能完善的后台管理系统。这个框架极大地简化了网页开发过程,让开发者可以专注于业务逻辑,而不是繁琐的界面实现。...

    jquery.easyui.min.zip

    下拉数据网格(Combogrid)组件和下拉框... 下拉数据网格(Combogrid)组件可以过滤、分页,并具有其他一些数据网格(Datagrid)的功能。 本教程向您展示如何在一个下拉数据网格(Combogrid)组件中过滤数据记录。

    EasyUI tutorial 中文版 chm

    使用jQuery easyUI 创建一个 RSS Feed阅读器 Drag and Drop easyUI 基础的拖动和放置 使用easyUI创建一个拖放的购物车 使用easyUI创建一个课程表 Menu and Button 使用easyUI创建简单的菜单 使用easyUI...

    jQuery+EasyUI+1.2.4+API+中文文档(标记).rar

    jQuery+EasyUI+1.2.4+API+中文文档,有时间好好看一下,目录如下: Base 基础 Documentation 文档 Parser 解析器 EasyLoader 加载器 Draggable 可拖拽 Droppable 可释放 Resizable 可调整尺寸 Pagination...

Global site tag (gtag.js) - Google Analytics