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; } 
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
