EasyUI combotree实现模糊筛选功能
程序员文章站
2024-02-03 21:04:28
...
EasyUI没有提供Combotree的筛选功能,但是控件的事件完全继承自combo和tree控件,其中tree有筛选功能:doFilter(combobox也有filter,不过combotree不是继承自combobox),可以用这个功能来实现筛选。
要在输入框输入时触发此事件,调用筛选功能,就要用到combo的keyHandler事件:
/**
* 默认值
*/
$.fn.combo.defaults = $.extend({}, $.fn.validatebox.defaults, {
width : "auto",
panelWidth : null,
panelHeight : 200,
multiple : false,
separator : ",",
editable : true,
disabled : false,
hasDownArrow : true,
value : "",
delay : 200,
keyHandler : {
up : function() {
},
down : function() {
},
enter : function() {
},
query : function(q) {
}
},
onShowPanel : function() {
},
onHidePanel : function() {
},
onChange : function(_5d, _5e) {
}
});
})(jQuery);
当输入变化时调用query来筛选:
query: function (q) {
var t = $(this).combotree('tree');
t.tree('doFilter', q);
}
示例:
修改默认值:
//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');
t.tree('doFilter', q);
}
});
然后再创建combotree,适用于单选,代码中增加了判断,避免手工输入不存在的选项:
MYVARS.bCustomerChanged = false;
MYVARS.selectRow = null;
$('#' + ID).combotree({
url: MYVARS.basePath + '../Inc/U8/getCustomerWithClassTreeData.ashx',
lines: true,
panelWidth: 300,
panelHeight: 400,
required: true,
onChange: function (newValue, oldValue) {
MYVARS.bCustomerChanged = false;//记录是否有改变(当手动输入时发生)
},
onHidePanel: function () {
var t = $(this).combotree('getValue');
if (MYVARS.bCustomerChanged) {
if (MYVARS.selectRow == null || t != MYVARS.selectRow.id) {//没有选择或者选项不相等时清除内容
alert('请选择,不要直接输入');
$(this).combotree('clear');
} else {
//do something...
}
}
MYVARS.bCustomerChanged = false;
MYVARS.selectRow = null;
},
onSelect: function (row) {
MYVARS.selectRow = row;
$('#' + ID).combotree('setValue', row.id);
},
onClick: function (node) {
if (node.type != '1') {
$('#' + ID).combotree('clear');
alert('只能选择客户,不可选择分类');
}
}
});
$('#' + ID).parent().find('.textbox-text').blur(function () {
$('#' + ID).combotree('clear');
});
keyHandler事件也可以写在combotree的选项中:
$(xx).combotree({keyHandler:{
query:function(q){
……
}
}})
效果:
未筛选:
已筛选: