1. Usage Scenarios
The drop-down box can easily provide us with the selection function. Through the drop-down box, we can easily select a certain value without manual input. There is a ComboGrid corresponding to it in EasyUI. ComboGrid can be used not only as a drop-down box, but also for searching, displaying data that matches the currently entered characters.
Generally we have two ways to use ComboGrid. One is to obtain the data first, bring it to the page, and then render it when the page is loaded; the other is to request the background service through ajax after the page is loaded, obtain the json data, and then render it. Both methods can be used in general applications and have no other problems. However, when the amount of data is large, neither of these two methods can meet our needs well. For example, when the amount of data reaches tens of thousands or hundreds of thousands, the time to load the page will become significantly longer or even freeze. At this time, we can use the ComboGrid paging method to display the data in paging.
2. Example
The html code is as follows:
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> The background controller is as follows:
/** * 以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; } 
What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PMThe article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PMThe article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PMThe article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PMThe article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the viewport meta tag? Why is it important for responsive design?Mar 20, 2025 pm 05:56 PMThe article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PMThe article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PMArticle discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PMThis article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
SublimeText3 Chinese version
Chinese version, very easy to use
