实现easyui 中 combotree / combox 模糊查询

1. 要使combotree实现查询功能,只能通过扩展代码,在EasyUI库或者本地js文件中加入以下代码:

//自定义

可编辑 模糊查询

(function(){

//combobox可编辑,自定义模糊查询

$.fn.combobox.defaults.editable =true;

$.fn.combobox.defaults.filter = function(q,row){

var opts =$(this).combobox('options');

return row[opts.textField].indexOf(q)>= 0;

};

//combotree可编辑,自定义模糊查询

$.fn.combotree.defaults.editable =true;

$.extend($.fn.combotree.defaults.keyHandler,{

up:function(){

console.log('up');

},

down:function(){

console.log('down');

},

enter:function(){

console.log('enter');

},

query:function(q){

var t =$(this).combotree('tree');

var nodes =t.tree('getChildren');

for(var i=0; i

var node = nodes[i];

if (node.text.indexOf(q) >=0){

$(node.target).show();

} else {

$(node.target).hide();

}

}

var opts =$(this).combotree('options');

if (!opts.hasSetEvents){

opts.hasSetEvents = true;

var onShowPanel =opts.onShowPanel;

opts.onShowPanel = function(){

var nodes =t.tree('getChildren');

for(var i=0;i

$(nodes[i].target).show();

}

onShowPanel.call(this);

};

$(this).combo('options').onShowPanel = opts.onShowPanel;

}

}

});

})(jQuery);

2.  解决Firefox 无法使用问题

使用中发现一个奇怪的问题,easyui的combobox在IE下面输入中文,可以自动实现筛选和检索的功能,但是在firefox下面不可以。 于是查了一些资料,发现原来是浏览器对于中文输入法的处理问题,对于chrome和IE他们会响应输入法最后输入中文时的keydown事件,也就是说如果你输入"调"这个字,如果用的拼音输入法,你按下diao四个字符的时候,IE不会处理keydown事件,只有当"调"这个字进入到输入框中的时候,才会触发keydown从而触发combobox的检索。 而Firefox会响应每一个字符的keydown事件,也就是按下d i  a o四个键的时候各触发一次keydown事件,而选择中文字符的时刻,却只触发keyup事件,而不触发keydown事件。 而combobox的过滤事件恰恰只绑定了keydown所以导致了在firefox中中文输入无法检索的问题。

解决方法如下: 在easyui 1.4版本的jQuery.easyui.min.js 中搜索如下代码:

$.fn.combo.defaults=$.extend({},$.fn.textbox.defaults,{inputEvents:{click:_8a2,keydown:_8a6,paste:_8a6,drop:_8a6},panelWidth:null,panelHeight:200,panelMinWidth:null,panelMaxWidth:null,panelMinHeight:null,panelMaxHeight:null,panelAlign:"left",multiple:false,selectOnNavigation:true,separator:",",hasDownArrow:true,delay:200,keyHandler:{up:function(e){

},down:function(e){

},left:function(e){

},right:function(e){

},enter:function(e){

},query:function(q,e){

}},onShowPanel:function(){

},onHidePanel:function(){

},onChange:function(_8d6,_8d7){

}});

})(jQuery);

将其中的keydown改为keyup修改后为keyup:_8a6即可解决问题。

如果不适用mini版的话,可以修改plugin下面的jquery.combo.js修改的部分和上面一致。

你可能感兴趣的:(实现easyui 中 combotree / combox 模糊查询)