easyui-combogrid匹配查询

用到easyui-combogrid，数据比较少的情况，可以一页就显示完毕，然后直接下拉选择。但是对于数据量比较大的情况，一页显示全部显然不合适，好在从easyui-combogrid的数据加载方式可以知道，下拉表格继承自easyui-datagrid，属性和方法也继承自easyui-datagrid，那么当然可以利用表格的分页属性:

$('#textYear').combogrid({
panelWidth: 500,
idField: 'num',
textField: 'id',
url:'getTextYear.do',
method: 'post',
queryParams:{cond_value:''},
mode: 'local',
columns: [[
{field:'num',title:'value',width:80},
{field:'id',title:'note',width:180,align:'left'}
]],
fitColumns: true,
pagination:true,
pageSize:10

});

分页属性设置为true，前台自动显示分页栏，页面数据条数设为10条。

这样对数据量大的就可以分页了。

但是让用户一页一页的去翻页从而找到自己需要的数据显然更不合理，如果数据有几万条，所以分页控件只解决了数据显示的问题，并没有解决数据数据匹配的问题。

查看官方文档，easyui-combogrid提供了一个filter方法，用来匹配用户当前输入字符与下拉选项的值，测试后发现，filter只适用于当前页！并且在测试中还发现，easyui-combogrid当前页默认最多显示18条数据，官网的demo是18条数据，但是有翻页数据的情况下就失效了。但是官方又没有提供额外的方法，只能另外写了。

好在功夫不负有心人，还真的在网上找到了一个网友写的匹配查询方法

要匹配用户输入的字符和下拉表格的数据，就需要获得用户输入时的键盘事件或者鼠标事件，然后传递输入的字符作为参数，去进行查询，查询的方式和数据表格的查询是一样的，所以困难在于捕获用户当前输入。

/*********下拉数据表格匹配查询 *******/
setTimeout(function () {
var cond_value;
var old = '';
var search = true;
var query = [];
var $grid = $('#textYear');
$grid.combo('options').onChange = function (_new, _old) {
if (_new != old) {
old = _new;
query = [old];
setTimeout(function () {
if (query.length > 0 && search) {
var param = query.pop();
query = [];
if (param != '') {
$grid.combogrid('grid').datagrid('load', {cond_value: param});
}
loading = false;
}
}, 500);
}
};

$grid.combogrid('grid').datagrid('options').onSelect = function(){
return false;
};

$grid.combogrid('grid').datagrid('options').onClickRow = function(index, row) {
search = false;
$grid.combo('hidePanel');
$grid.combo('setValue', row.id);
$grid.combo('setText', row.num);
setTimeout(function () {
search = true;
}, 1000);
}
}, 1000);

设置一个合适的延迟时间，因为用户输入是有时间的，一般输入中文耗时比输入英文字符耗时要长，所以稍微设置长一点。然后声明一个查询参数数组query，参数变量名cond_value,当检测到当前combogrid的选项options有更改时，即用户有输入时，调用combo的onChange方法，这个方法有两个参数，一个设为新值，一个设为旧值，当新值不等于旧值，就把新值赋给查询参数。然后下拉数据表格根据这个参数去重新加载数据。

由于每输入一个字符，数据表格就会根据这个字符去做一次查询并加载数据，当用户输入字符较多时，查询和加载会进行很多次，原因是我们没法判断用户什么时候输入完毕，这样会带来性能的损耗，所以一开始设置一个合理的延时是非常有必要的。

匹配查询方法非原创，请支持原创作者！

巴特西

easyui-combogrid匹配查询

最新文章

热门文章