你的位置:首页 > 网页设计

[网页设计]EasyUI ComboGrid 分页


一、使用场景

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

二、示例

  html代码如下:

 1 <!DOCTYPE html> 2 <html> 3 <head> 4  5 <meta charset="utf-8"/> 6 <title>easyui-combox 分页示例</title>  7   <link rel="stylesheet" type="text/css" href="resource/themes/default/easyui.css"> 8   <link rel="stylesheet" type="text/css" href="resource/themes/icon.css"> 9   <link rel="stylesheet" type="text/css" href="resource/demo.css"> 10 </head> 11 <body> 12   <div>  13     <span><b class="tool_box_b">选择用户:</b></span> 14     <div> 15       <input id="person" style="width:285px;"/> 16       <input id="personId" type="hidden" name="personId"/> 17       <input type="text" id="txtName" style="display: none;" /> 18        <input type="text" id="txtId" style="display: none;" /> 19     </div> 20   </div>                21 <script type="text/javascript" src="resource/jquery.min.js"></script> 22 <script type="text/javascript" src="resource/jquery.easyui.min.js"></script> 23 <script type="text/javascript"> 24 $(function () { 25   $('#person').combogrid({ 26     panelWidth: 400, 27     idField: 'id',    //ID字段  28     textField: 'name',  //显示的字段  29     url: "${pageContext.request.contextPath}/controller/persons.action", 30     fitColumns: true, 31     striped: true, 32     editable: true, 33     pagination: true,      //是否分页 34     rownumbers: true,      //序号 35     collapsible: false,     //是否可折叠的 36     fit: true,         //自动大小 37     method: 'post', 38     columns: [[ 39       { field: 'name', title: '页面名称', width: 80 }, 40       { field: 'id', title: '用户id', width: 80, hidden: true }, 41     ]], 42     keyHandler: { 43       query: function (keyword) {   //【动态搜索】处理 44         var comgrid = $('#person').combogrid("grid"); 45         var queryParams = comgrid.datagrid('options').queryParams; //设置查询参数 46         queryParams.keyword = keyword; 47         comgrid.datagrid('options').queryParams = queryParams; 48         comgrid.datagrid("reload");  //重新加载 49         $('#person').combogrid("setValue", keyword); 50         //将查询条件存入隐藏域 51         $('#txtId').val(keyword); 52       } 53     }, 54     onSelect: function () {       //选中处理 55       var seldata = $('#person').combogrid('grid').datagrid('getSelected'); 56       $('#txtName').val(seldata.name); 57       $('#txtId').val(seldata.id); 58       $('#personId').val(seldata.id); 59       //alert(seldata.id+"--"+seldata.name); 60     } 61   }); 62       63   //取得分页组件对象 64   var pager = $('#person').combogrid('grid').datagrid('getPager'); 65     66   if (pager) { 67     $(pager).pagination({ 68        pageSize: 10,        //每页显示的记录条数,默认为10 69        pageList: [10, 20, 30, 40, 50],    //可以设置每页记录条数的列表 70        beforePageText: '第',    //页数文本框前显示的汉字 71        afterPageText: '页  共 {pages} 页', 72        displayMsg: '当前显示 {from} - {to} 条记录  共 {total} 条记录', 73       //选择页的处理 74        onSelectPage: function (pageNumber, pageSize) { //按分页的设置取数据 75         getData(pageNumber, pageSize); 76         //设置表格的pageSize属性,表格变化时按分页组件设置的pageSize显示数据 77         $('#person').combogrid("grid").datagrid('options').pageSize = pageSize; 78         //将隐藏域中存放的查询条件显示在combogrid的文本框中 79         $('#person').combogrid("setValue", $('#txtId').val()); 80         $('#txtName').val(''); 81       }, 82       onChangePageSize: function () {}, //改变页显示条数的处理 (处理后还是走onSelectPage事件,所以设置也写到onSelectPage事件中了) 83       onRefresh: function (pageNumber, pageSize) { //点击刷新的处理 84         getData(pageNumber, pageSize); //按分页的设置取数据 85         $('#person').combogrid("setValue", $('#txtId').val());//将隐藏域中存放的查询条件显示在combogrid的文本框中 86         $('#txtName').val(''); 87       } 88     }); 89   } 90      91   var getData = function (page, pagesize) {  92     $.ajax({ 93       type: "POST", 94       url: "${pageContext.request.contextPath}/controller/persons.action", 95       type : "POST", 96       data: { 97         "page" : page, 98         "pagesize" : pagesize, 99         "keyword" : $('#txtId').val()100       }101       error: function (102         $.messager.progress('close');103       },104       success: function (data) {105         console.log(typeof data);106           $('#person').combogrid("grid").datagrid("loadData", $.parseJSON(data));107       }108     }); 109     110   };111 });112 </script>        113                       114 </body>115 </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;  }