easyui 筛选数据及仅允许选择数据

先说需求,本地已缓存数据源,用户输入拼音码或编号,筛选数据作为新的数据源,然后通过键盘选择。

再说问题,easyui combogrid控件,在mode为local,也就是将数据源缓存在本地的情况下,一般情况下,是通过

filter:function(q,row){
var opts=$(this).options;
return row[opts.textField].indexOf(q)>-1;
}

官网api也有介绍,但是在实际项目中有两个问题:

  1. 数据量较大,每次筛选很慢。
  2. 不知道是不是数据原因,在筛选时,并没有筛选出数据,只是选择了符合条件的最后一条。

尝试使用了onChange方法,同样有问题。在选择数据行以后(假如text为a),又触发了onChange事件。如果对newValue进行判定,遍历数据源,匹配后,设置新的text等于a,防止触发onChange事件将text变为空,这样虽然可以最终选到想要的text,但是这样的时候,点击下键就选择,不知道是不是easyui的缺陷,看源代码无果。同样无法满足需求。

最后,采用的解决办法是keyHandler:

easyui 筛选数据及仅允许选择数据
keyHandler: {
up: function(e) {
var row=$grid.combogrid('grid').datagrid('getSelected');
var i=$grid.combogrid('grid').datagrid('getRowIndex', row)||1;
$grid.combogrid('grid').datagrid('selectRow', (i-1)>=0?(i-1): 0);
}
,
down:function(e) {
var row=$grid.combogrid('grid').datagrid('getSelected');
var data=$grid.combogrid('grid').datagrid('getData');
length=data.total;
var i=$grid.combogrid('grid').datagrid('getRowIndex', row);
if(i===-1) {
$grid.combogrid('grid').datagrid('selectRow', 0);
}
$grid.combogrid('grid').datagrid('selectRow', (i+1)<length?(i+1):length);
}
,
query: function(q, e) {
var loadDepts=[];
var value=q.toString().toUpperCase();
if(value.length<2) {
return;
}
var reg=/[\u4e00-\u9fa5]+/g;
if(reg.test(value)) {
return;
}
for(var i=0;
i<deptData.length;
i++) {
if(deptData[i]["dept_code"].indexOf(value)>-1||deptData[i]["input_code"].indexOf(value)>-1) {
loadDepts.push(deptData[i]);
}
}
$grid.combogrid('grid').datagrid('loadData', loadDepts);
$grid.combogrid("setText", q);
}
,
enter:function(e) {
var row=$grid.combogrid('grid').datagrid('getSelected');
$grid.combogrid('setValue', row.dept_code);
$grid.combogrid('hidePanel');
}
}
easyui 筛选数据及仅允许选择数据

filter事件很好的解决了筛选数据成为新的数据源的问题。同时还满足了全部使用键盘操作的需求(这个需求主要是为了满足用户的登记速度)。

另一个问题是怎么使得用户最后输入的数据合法。显然editable不能设置为false,因为用户要筛选,解决办法,就是运用onHidePanel事件。直接上代码。

就是这样咯,这个控件捉急!!!!!!!!!!

$(elem).combogrid({
onHidePanel:function(){
valiCombo($grid);
}
})

  

function valiCombo($grid){
var opts = $grid.combogrid('options');
var value =$grid.combogrid('getValue');
var data=$grid.combogrid('grid').datagrid('getData').rows;
for(var i=0;i<data.length;i++){
if(value==data[i][opts.idField]){
return;
}
}
$.messager.alert("提示",""+$grid.parent().prev()[0].innerHTML+"必须选择下拉列表的一项","warning",function(){
$grid.combogrid('showPanel');
});
}

  

上一篇:Promise 异步函数顺序执行


下一篇:Android控件开发——ListView