EasyUI ComboGrid 分頁

時間 2019-11-12

標籤 easyui combogrid 分頁简体版

原文原文鏈接

1、使用場景javascript

　　下拉框能夠很方便地爲咱們提供選擇功能，經過下拉框咱們能夠便捷地選擇某個值，而不須要手動輸入。在EasyUI中有ComboGrid與之對應。ComboGrid既能夠當中下拉框來使用，又能夠進行搜索，展現與當前輸入的字符相匹配的數據。
　　通常咱們有兩種方式使用ComboGrid。一種是將數據先獲取，帶到頁面，而後在頁面加載的時候進行渲染；另外一種是當頁面加載完成後，經過ajax請求後臺服務，獲取json數據，再進行渲染。這兩種方式在通常的應用中均可以使用，也不存在其餘問題。然而當數據量大的時候，這兩種方式都不能很好的知足咱們的須要。例如數據量達到萬或者幾十萬的時候，加載該頁面的時間就會明顯變長，甚至卡死。此時咱們可使用ComboGrid分頁的方式，對數據進行分頁展現。css

2、示例html

　　html代碼以下：java

  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以下：jquery

/**
     * 以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;
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。