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 (XMLHttpRequest, textStatus, errorThrown) {

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;

    }    

    

你可能感兴趣的:(easyui)