默认闭合节点时easyui-combotree进行模糊查询_combotree keyhandler-优快云博客

本文介绍如何使用EasyUI Combotree组件实现模糊查询功能，包括配置keyHandler属性来监听查询和回车事件，以及在事件中处理面板显示和节点展开逻辑。同时，提供了HTML和JS代码示例，展示如何通过自定义函数实现区划选择器的模糊搜索和面板控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认闭合节点时easyui-combotree进行模糊查询

一、解决问题：
1.easyui-combotree模糊查询，keyHandler的query事件
2. keyHandler的enter事件实现
3. 配置中加了keyHandler来实现查询时，有时候打不开panel面板，需要在enter事件中加入关闭面板代码 $KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲region').combot\dots$ (’#region’).combotree(‘tree’).tree(‘expandTo’,$(’#region’).combotree(‘tree’).tree(‘find’, openid).target);
二、HTML代码段

<input id="region" name="region" class="easyui-combotree" style="width:90%;"  
							data-options="url:'loginServer/regions',method:'get',editable:true,
								required:true,textField:'name',
								border:false,
								fit:false,
								prompt:'区划',
								filter:matcher,
								validateOnCreate:false,
								missingMessage:'请选择区划',
								onLoadSuccess:regionLoadSuccess,               //数据加载完后执行
								onShowPanel:onShowPanelDivision,                //打开面板
								keyHandler : {
							 		query:queryDivision,                                     //时时模糊查询
							 		enter:enterDivision                                        //输入框回车事件
							 	}" >
</input>

三、JS代码段

//区划模糊查询时展开指定节点的所有父节点
function expandParent(treeObj, node){  
    var parentNode = treeObj.tree("getParent", node.target);  
    if(parentNode != null && parentNode != "undefined"){ 
    	$(parentNode.target).show();
        treeObj.tree("expand", parentNode.target);  
        expandParent(treeObj, parentNode);  
    }  
};  
//区划模糊查询
function queryDivision(q){
	var t = $(this).combotree('tree'); 
    var nodes = t.tree('getChildren'); 
    for(var i=0; i<nodes.length; i++){  
        var node = nodes[i];  
        if (node.text.indexOf(q) >= 0 || node.id.indexOf(q) >= 0){  
            $(node.target).show(); 
            expandParent(t,node);
        } 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;  
    }  
};
function onShowPanelDivision(){//打开面板：点击右侧按钮事件
	var openid=$("input[name='region']").val();
	//展开指定节点，其他节点闭合
	$('#region').combotree('tree').tree('collapseAll'); 
	if(openid){
		$('#region').combotree('tree').tree('expandTo',$('#region').combotree('tree').tree('find', openid).target);
	}	
}
function enterDivision(q){//回车事件	
	$('#region').combotree('hidePanel');
	var oldValue=$("input[name='region']").val(); 
	$('#region').combotree('setValue', oldValue);
}
function regionLoadSuccess(none){
	$(this).tree('collapseAll'); //关闭树节点
	//设置region;
	var region = $.cookie('region');
	if(isEmpty(region)){
		region = "430000";
	}
	$('#region').combotree('setValue', region);
}