首頁 > 開發者 > JavaScript
EasyUI ComboGrid 分頁，easyuicombogrid
一、使用情境
下拉框可以很方便地為我們提供選擇功能，通過下拉框我們可以便捷地選擇某個值，而不需要手動輸入。在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; }
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
