一、使用场景

  下拉框可以很方便地为我们提供选择功能,通过下拉框我们可以便捷地选择某个值,而不需要手动输入。在EasyUI中有ComboGrid与之对应。ComboGrid既可以当中下拉框来使用,又可以进行搜索,展示与当前输入的字符相匹配的数据。
  一般我们有两种方式使用ComboGrid。一种是将数据先获取,带到页面,然后在页面加载的时候进行渲染;另一种是当页面加载完成后,通过ajax请求后台服务,获取json数据,再进行渲染。这两种方式在一般的应用中都可以使用,也不存在其他问题。然而当数据量大的时候,这两种方式都不能很好的满足我们的需要。例如数据量达到万或者几十万的时候,加载该页面的时间就会明显变长,甚至卡死。此时我们可以使用ComboGrid分页的方式,对数据进行分页展示。

二、示例

  html代码如下:

 <!DOCTYPE html>
<html>
<head> <meta charset="utf-8"/>
<title>easyui-combox 分页示例</title>
<link rel="stylesheet" type="text/css" href="resource/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="resource/themes/icon.css">
<link rel="stylesheet" type="text/css" href="resource/demo.css">
</head>
<body>
<div>
<span><b class="tool_box_b">选择用户:</b></span>
<div>
<input id="person" style="width:285px;"/>
<input id="personId" type="hidden" name="personId"/>
<input type="text" id="txtName" style="display: none;" />
<input type="text" id="txtId" style="display: none;" />
</div>
</div>
<script type="text/javascript" src="resource/jquery.min.js"></script>
<script type="text/javascript" src="resource/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function () {
$('#person').combogrid({
panelWidth: 400,
idField: 'id', //ID字段
textField: 'name', //显示的字段
url: "${pageContext.request.contextPath}/controller/persons.action",
fitColumns: true,
striped: true,
editable: true,
pagination: true, //是否分页
rownumbers: true, //序号
collapsible: false, //是否可折叠的
fit: true, //自动大小
method: 'post',
columns: [[
{ field: 'name', title: '页面名称', width: 80 },
{ field: 'id', title: '用户id', width: 80, hidden: true },
]],
keyHandler: {
query: function (keyword) { //【动态搜索】处理
var comgrid = $('#person').combogrid("grid");
var queryParams = comgrid.datagrid('options').queryParams; //设置查询参数
queryParams.keyword = keyword;
comgrid.datagrid('options').queryParams = queryParams;
comgrid.datagrid("reload"); //重新加载
$('#person').combogrid("setValue", keyword);
//将查询条件存入隐藏域
$('#txtId').val(keyword);
}
},
onSelect: function () { //选中处理
var seldata = $('#person').combogrid('grid').datagrid('getSelected');
$('#txtName').val(seldata.name);
$('#txtId').val(seldata.id);
$('#personId').val(seldata.id);
//alert(seldata.id+"--"+seldata.name);
}
}); //取得分页组件对象
var pager = $('#person').combogrid('grid').datagrid('getPager'); if (pager) {
$(pager).pagination({
pageSize: 10, //每页显示的记录条数,默认为10
pageList: [10, 20, 30, 40, 50], //可以设置每页记录条数的列表
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
//选择页的处理
onSelectPage: function (pageNumber, pageSize) { //按分页的设置取数据
getData(pageNumber, pageSize);
//设置表格的pageSize属性,表格变化时按分页组件设置的pageSize显示数据
$('#person').combogrid("grid").datagrid('options').pageSize = pageSize;
//将隐藏域中存放的查询条件显示在combogrid的文本框中
$('#person').combogrid("setValue", $('#txtId').val());
$('#txtName').val('');
},
onChangePageSize: function () {}, //改变页显示条数的处理 (处理后还是走onSelectPage事件,所以设置也写到onSelectPage事件中了)
onRefresh: function (pageNumber, pageSize) { //点击刷新的处理
getData(pageNumber, pageSize); //按分页的设置取数据
$('#person').combogrid("setValue", $('#txtId').val());//将隐藏域中存放的查询条件显示在combogrid的文本框中
$('#txtName').val('');
}
});
} var getData = function (page, pagesize) {
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/controller/persons.action",
type : "POST",
data: {
"page" : page,
"pagesize" : pagesize,
"keyword" : $('#txtId').val()
}
error: function (XMLHttpRequest, textStatus, errorThrown) {
$.messager.progress('close');
},
success: function (data) {
console.log(typeof data);
$('#person').combogrid("grid").datagrid("loadData", $.parseJSON(data));
}
}); };
});
</script> </body>
</html>

  后台controller如下:

/**
* 以json数据返回person列表数据
* @param page 当前页序号
* @param pagesize 页面大小
* @param keyword 要搜索的关键字
* @return json数据
*/
@RequestMapping(value = "person")
@ResponseBody
public Map<String, Object> getPersons(@RequestParam("page") int page,
@RequestParam("pagesize") int pagesize,
@RequestParam(value="keyword",required=false) String keyword){ Map<String, Object> result = new HashMap<String, Object>();
int total = personService.countPageByName(kind, keyword);
List<Person> productList = personService.queryPageByName(keyword, pagesize, page);
result.put("total", total);
result.put("rows", productList);
result.put("_pagelines",pagesize); result.put("_currpage", page); return result;
}

EasyUI ComboGrid 分页的更多相关文章

  1. 【原】EasyUI ComboGrid 集成分页、按键示例

    需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下键在表格中移动选择行数据: 4.可以使用回车键在表格中选中行数据: 5.在下拉框的文本框中输入内容,能查询表格: 6. ...

  2. easyui combogrid下拉表格的分页/按键/动态搜索

    作者:xfl4629712  <  easyui combogrid下拉表格的分页/按键/动态搜索  > 需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下 ...

  3. EasyUI ComboGrid的绑定,上下键和回车事件,输入条件查询

    首先我们先看一下前台的绑定事件 1.先定义标签 <input id="cmbXm" type="text" style="width: 100p ...

  4. EasyUI DataGrid分页数据绑定

    记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...

  5. EasyUI datagrid 分页Json字符串格式

    //EasyUI datagrid 分页Json字符串格式 //{"total":xx,"rows":[{...},{...}]} total:总数 rows: ...

  6. easyUI的分页,只显示第X 共Y页。改为显示 第X 页 共Y页

    如下图,easyUI的分页,只显示第X 共Y页. 需求需要显示 第X 页 共Y页. 解决办法:在easyui-lang-zh_CN.js更改以下代码,即可.也就是在 “共{pages}页”前面加个 “ ...

  7. 表单(中)-EasyUI Combogrid 组合网格、EasyUI Numberbox 数字框、EasyUI Datebox 日期框、EasyUI Datetimebox 日期时间框、EasyUI Calendar 日历

    EasyUI Combogrid 组合网格 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults.通过 $.fn.combogrid.defaults 重写 ...

  8. asp.net mvc easyui datagrid分页

    提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...

  9. easyUI datagrid 分页参数page和rows

    Struts2获取easyUI datagrid 分页参数page和rows 用pageHelper分页时,只要是能够获取前台传来的两个参数page和rows基本就完成了很大一部分. 获取方法:定义两 ...

随机推荐

  1. ExtendHelper

    public static class ExtendHelper { /// <summary> /// 检查当前字符串是否符合某种格式 /// </summary> /// ...

  2. [Tool] Visual Studio必备插件 + 技能

    总结自己常用的VS插件,其中部分需要注册. 在该链接http://www.cnblogs.com/neverc/p/4591501.html中提供 1.Web Essentials(测试支持2010, ...

  3. 浏览器 UserAgent 相关知识整理

    总结整理时下流行的浏览器User-Agent大全 浏览器userAgent大全 各种浏览器UserAgent一览表(桌面+移动) 使用JS判断移动设备的终端类型(浏览器UserAgent) JS通过分 ...

  4. WPF关闭应用程序方法

    很多人认为关闭应用程序应该很简单,例如WindowsForm里一个Application.Exit();方法就可以解决问题,但在WPF里面可别滥用,因为WPF里Application类没有该方法,倒是 ...

  5. NoSuchMethodException <init>()

    1. Question Description: SEVERE: Servlet.service() for servlet [dispatcher] in context with path [/n ...

  6. PHP的静态变量和引用函数

    直接贴代码,结果的原因写在备注了 <?php /** * Created by PhpStorm. * User: Administrator * Date: 16-8-25 * Time: 上 ...

  7. mysql ALL_O_DIRECT引发的unaligned AIO/DIO导致hang

    公司内部有一套mysql环境,使用的是percona server分支(和其他几十套环境的版本.参数完全相同),就这套环境每隔两三天就会hang一次,关键hang的时候服务器cpu也就是百分之三四十, ...

  8. Eclipse下Android开发的问题:Installation error: INSTALL_FAILED_NO_MATCHING_ABIS 解决办法

    在Android模拟器上安装apk的时候出现   INSTALL_FAILED_NO_MATCHING_ABIS 这个错误提示的解决办法. 是由于使用了native libraries .该nativ ...

  9. 高效构建Web应用 教你玩转Play框架 http://www.anool.net/?p=577

    Play 框架是一个完整的Web应用开发框架,覆盖了Web应用开发的各个方面.Play 框架在设计的时候借鉴了流行的 Ruby on Rails 和 Grails 等框架,又有自己独有的优势.使用 P ...

  10. ASP.NET MVC:窗体身份验证及角色权限管理示例

    ASP.NET MVC 建立 ASP.NET 基础之上,很多 ASP.NET 的特性(如窗体身份验证.成员资格)在 MVC 中可以直接使用.本文旨在提供可参考的代码,不会涉及这方面太多理论的知识. 本 ...