一、使用场景
下拉框可以很方便地为我们提供选择功能，通过下拉框我们可以便捷地选择某个值，而不需要手动输入。在EasyUI中有ComboGrid与之对应。ComboGrid既可以当中下拉框来使用，又可以进行搜索，展示与当前输入的字符相匹配的数据。
一般我们有两种方式使用ComboGrid。一种是将数据先获取，带到页面，然后在页面加载的时候进行渲染；另一种是当页面加载完成后，通过ajax请求后台服务，获取json数据，再进行渲染。这两种方式在一般的应用中都可以使用，也不存在其他问题。然而当数据量大的时候，这两种方式都不能很好的满足我们的需要。例如数据量达到万或者几十万的时候，加载该页面的时间就会明显变长，甚至卡死。此时我们可以使用ComboGrid分页的方式，对数据进行分页展示。
二、示例
html代码如下：
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"/>
<title>easyui-combox 分页示例</title>
<link rel="stylesheet" type="text/css" href="resource/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="resource/themes/icon.css">
<link rel="stylesheet" type="text/css" href="resource/demo.css">
</head>
<body>
<div>
<span><b class="tool_box_b">选择用户：</b></span>
<div>
<input id="person" style="width:285px;"/>
<input id="personId" type="hidden" name="personId"/>
<input type="text" id="txtName" style="display: none;" />
<input type="text" id="txtId" style="display: none;" />
</div>
</div>
<script type="text/javascript" src="resource/jquery.min.js"></script>
<script type="text/javascript" src="resource/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function () {
$('#person').combogrid({
panelWidth: 400,
idField: 'id', //ID字段
textField: 'name', //显示的字段
url: "${pageContext.request.contextPath}/controller/persons.action",
fitColumns: true,
striped: true,
editable: true,
pagination: true, //是否分页
rownumbers: true, //序号
collapsible: false, //是否可折叠的
fit: true, //自动大小
method: 'post',
columns: [[
{ field: 'name', title: '页面名称', width: 80 },
{ field: 'id', title: '用户id', width: 80, hidden: true },
]],
keyHandler: {
query: function (keyword) { //【动态搜索】处理
var comgrid = $('#person').combogrid("grid");
var queryParams = comgrid.datagrid('options').queryParams; //设置查询参数
queryParams.keyword = keyword;
comgrid.datagrid('options').queryParams = queryParams;
comgrid.datagrid("reload"); //重新加载
$('#person').combogrid("setValue", keyword);
//将查询条件存入隐藏域
$('#txtId').val(keyword);
}
},
onSelect: function () { //选中处理
var seldata = $('#person').combogrid('grid').datagrid('getSelected');
$('#txtName').val(seldata.name);
$('#txtId').val(seldata.id);
$('#personId').val(seldata.id);
//alert(seldata.id+"--"+seldata.name);
}
}); //取得分页组件对象
var pager = $('#person').combogrid('grid').datagrid('getPager'); if (pager) {
$(pager).pagination({
pageSize: 10, //每页显示的记录条数，默认为10
pageList: [10, 20, 30, 40, 50], //可以设置每页记录条数的列表
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
//选择页的处理
onSelectPage: function (pageNumber, pageSize) { //按分页的设置取数据
getData(pageNumber, pageSize);
//设置表格的pageSize属性，表格变化时按分页组件设置的pageSize显示数据
$('#person').combogrid("grid").datagrid('options').pageSize = pageSize;
//将隐藏域中存放的查询条件显示在combogrid的文本框中
$('#person').combogrid("setValue", $('#txtId').val());
$('#txtName').val('');
},
onChangePageSize: function () {}, //改变页显示条数的处理 (处理后还是走onSelectPage事件，所以设置也写到onSelectPage事件中了)
onRefresh: function (pageNumber, pageSize) { //点击刷新的处理
getData(pageNumber, pageSize); //按分页的设置取数据
$('#person').combogrid("setValue", $('#txtId').val());//将隐藏域中存放的查询条件显示在combogrid的文本框中
$('#txtName').val('');
}
});
} var getData = function (page, pagesize) {
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/controller/persons.action",
type : "POST",
data: {
"page" : page,
"pagesize" : pagesize,
"keyword" : $('#txtId').val()
}
error: function (XMLHttpRequest, textStatus, errorThrown) {
$.messager.progress('close');
},
success: function (data) {
console.log(typeof data);
$('#person').combogrid("grid").datagrid("loadData", $.parseJSON(data));
}
}); };
});
</script> </body>
</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;
}