1. 使用シナリオ
ドロップダウン ボックスを使用すると、手動入力せずに特定の値を簡単に選択できます。 EasyUI にはそれに対応する ComboGrid があります。 ComboGrid はドロップダウン ボックスとしてだけでなく、現在入力されている文字と一致するデータを表示する検索にも使用できます。
一般に、ComboGrid を使用するには 2 つの方法があります。 1 つは、最初にデータを取得してページに表示し、ページが読み込まれたときにそれをレンダリングする方法です。もう 1 つは、ページが読み込まれた後に ajax を介してバックグラウンド サービスをリクエストし、json データを取得してそれをレンダリングする方法です。どちらの方法も一般的なアプリケーションで使用でき、その他の問題はありません。ただし、データの量が多い場合、これら 2 つの方法はいずれもニーズを十分に満たすことができません。たとえば、データ量が数万または数十万に達すると、ページの読み込み時間が大幅に長くなったり、フリーズしたりすることがあります。このとき、ComboGrid ページング メソッドを使用してデータをページングで表示できます。
2. 例
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>バックグラウンド コントローラーは次のとおりです:
/** * 以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; } 
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
