Easyui combotree实现模糊查询

combotree模糊查询代码实现

最新推荐文章于 2023-02-16 12:33:48 发布

转载最新推荐文章于 2023-02-16 12:33:48 发布 · 1.3k 阅读

文章标签：

#combotree模糊查询

前端专栏收录该内容

2 篇文章

订阅专栏

博客提供了combotree模糊查询的详细讲解链接，并给出了实现combotree模糊查询的代码。代码中使combotree可编辑，自定义了模糊查询功能，包括对上下键、回车键操作的处理，以及根据输入内容显示或隐藏节点等。

详细讲解链接：https://www.cnblogs.com/m97i/p/7884303.html
代码：
/**
 * combotree模糊查询
 */
(function(){
    //combotree可编辑，自定义模糊查询
    $.fn.combotree.defaults.editable = true;
    $.extend($.fn.combotree.defaults.keyHandler,{
        up:function(){
            console.log('up');
        },
        down:function(){
            console.log('down');
            'a'.toUpperCase()
        },
        enter:function(){
            console.log('enter');
        },
        query:function(q){
            var t = $(this).combotree('tree');
            t.tree('expandAll');
            var nodes = t.tree('getChildren');
            for(var i=0; i<nodes.length; i++){
                var node = nodes[i];
                if (node.text.toUpperCase().indexOf(q.toUpperCase()) >= 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.length; i++){
                        $(nodes[i].target).show();
                    }
                    onShowPanel.call(this);
                };
                $(this).combo('options').onShowPanel = opts.onShowPanel;
            }
        }
    });
})(jQuery);