EasyUI ComboGrid 分页_html/css_WEB-ITnose
一、使用场景
下拉框可以很方便地为我们提供选择功能，通过下拉框我们可以便捷地选择某个值，而不需要手动输入。在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; } 
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
HTML：結構，CSS：樣式，JavaScript：行為
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
HTML，CSS和JavaScript的未來：網絡開發趨勢
Apr 19, 2025 am 12:02 AM
HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。
HTML的未來：網絡設計的發展和趨勢
Apr 17, 2025 am 12:12 AM
HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。
HTML：建立網頁的結構
Apr 14, 2025 am 12:14 AM
HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。
HTML與CSS vs. JavaScript：比較概述
Apr 16, 2025 am 12:04 AM
HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。
HTML與CSS和JavaScript：比較Web技術
Apr 23, 2025 am 12:05 AM
HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。
HTML：是編程語言還是其他？
Apr 15, 2025 am 12:13 AM
HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。
＆lt; strong＆gt;，lt; b＆gt;有什麼區別標籤和lt; em＆gt;，＆lt; i＆gt;標籤？
Apr 28, 2025 pm 05:42 PM
本文討論了HTML標籤，和和關注其語義與表現用途及其對SEO和可訪問性的影響之間的差異。
