欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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);
            }


当然,要想在框中输入就要开启edit:editable:true

示例:

修改默认值:

        //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){
……
}
}})

效果:

未筛选:

EasyUI combotree实现模糊筛选功能

已筛选:

EasyUI combotree实现模糊筛选功能