一、使用场景
下拉框可以很方便地为我们提供选择功能，通过下拉框我们可以便捷地选择某个值，而不需要手动输入。在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;
}
时间： 2024-08-25 13:25:00