一、使用场景

　　下拉框可以很方便地为我们提供选择功能，通过下拉框我们可以便捷地选择某个值，而不需要手动输入。在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. C# 文字转声音

    添加COM组件引用:Microsoft Speech object library private SpVoice voice; private void button1_Click(object s ...

  2. Linq查询简介

    查询是一种从数据源检索数据的表达式. 查询通常用专门的查询语言来表示. 随着时间的推移,人们已经为各种数据源开发了不同的语言:例如,用于关系数据库的 SQL 和用于 XML 的 XQuery. 因此, ...

  3. Brute Force --- UVA 10167: Birthday Cake

     Problem G. Birthday Cake  Problem's Link:http://uva.onlinejudge.org/index.php?option=com_onlinejudg ...

  4. KMP算法详解 --- 彻头彻尾理解KMP算法

    前言 之前对kmp算法虽然了解它的原理,即求出P0···Pi的最大相同前后缀长度k. 但是问题在于如何求出这个最大前后缀长度呢? 我觉得网上很多帖子都说的不是很清楚,总感觉没有把那层纸戳破, 后来翻看 ...

  5. Winform开发框架之客户关系管理系统(CRM)的开发总结系列1-界面功能展示

    一直以来,都希望整合一个以客户为中心的平台,有两个方面的考虑:一是实现客户数据.客户关系.客户管理等方面的整合,以便更好利用好客户的相关资源,发挥最大的营销效益:二是整合目前我的开发框架的所有模块和技 ...

  6. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

  7. [CLR via C#]13. 接口

    一.类和接口继承 在Microsoft.Net Framwork中,有一个名为System.Object的类,它定义了4个公共实例方法:ToString, Equals, GetHashCode和Ge ...

  8. 将表数据生成Insert脚本

    set ANSI_NULLS ONset QUOTED_IDENTIFIER ONgo-- =============================================-- Author ...

  9. API的非向后兼容性无论如何通常代表着一种比较差的设计

    不管一个类库或者工具方法实现多么的好,如果无法做到向后兼容性,通常会给用户带来很大的升级成本,很多对此的依赖如果希望在后续的升级和维护期间使用该类库的其他新增特性或者好处,将不得不推迟升级亦或是被迫接 ...

  10. IOS缓存机制详解

    资料均来自互联网,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任. 人魔七七:http://www.cnblogs.com/qiqibo/ 为什么要有缓存 应用需要 ...