0、JQuery Easyui Tree 插件树菜单搜索

最新推荐文章于 2023-04-19 15:18:53 发布

原创最新推荐文章于 2023-04-19 15:18:53 发布 · 1.2k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#tree菜单树搜索 #jquery tree 树搜索 #tree 树搜索

Easy-UI 专栏收录该内容

1 篇文章

订阅专栏

一、实现方案

根据搜索的关键字，配对所有的节点。符合条件就显示否则隐藏。如果，该节点符合搜索配对条件，该节点的父节点要显示。

二、实现代码

2.1、页面结构

<div class="bor bg-white mt5">
	<div class="title2">
		<i class="fa fa-image"></i>&nbsp;<strong>售卖产品图片</strong>
		<span class="search-box pd5">
	    	<input v-textbox="searchProductImage" :options="{prompt:'请输入文件夹名称',width:200}">
	    </span>
	</div>
	<div class="bg-white">
		<ul id="productImageTree" v-tree url="/获取产品类目?type=imageType&screenType=new" :options="{ 
			animate:true,
			lines:true
		}" :on-click="selectProductCategory" :on-load-success="initSearch"></ul>
	</div>
</div>

var vm=new Vue({
	....
	watch: {
		'searchProductImage' : function(newVal){
			var self = this;
			self.jqTreeSearch('productImageTree',newVal);
		}
	}
}）

2.2、具体搜索逻辑

jqTreeSearch: function(jqTreeId,searchText){
	var self = this;
	var jqTree = $('#'+jqTreeId);
	//得到tree顶级node
	var parentNode=jqTree.tree('getRoots');
	//循环顶级 node 
	var children; 
    for(var i=0;i<parentNode.length;i++){
    	 var parentCount = 0;
    	 //获取顶级node下所有子节点
         children = jqTree.tree('getChildren',parentNode[i].target); 
         if(children){ //如果有子节点 
             for(var j=0;j<children.length;j++){ //循环所有子节点 
             if(children[j].text.indexOf(searchText)>=0 || children[j].id.indexOf(searchText)>=0){ //判断节点text是否包含搜索文本                     
            	 $(children[j].target).show();
                 // 设置该父节点是否隐藏显示
                 var jqTreeParentNode = $(jqTree.tree('getParent',children[j].target).target);
             	 if(jqTreeParentNode.is(':hidden') || parentCount == 0){
             		parentCount++;
             		jqTreeParentNode.show();
             		self.expandParent(jqTreeId,children[j]);
					 } 
             }else{
            	 $(children[j].target).hide();
             } 
             } 
         }else{ 
             if(parentNode[i].text.indexOf(searchText)>=0 || children[j].id.indexOf(searchText) >=0){ 
            	 $(parentNode[i].target).show();
            	 // 设置该父节点是否隐藏显示
         var jqTreeParentNode = $(jqTree.tree('getParent',parentNode[i].target).target);
     	 if(jqTreeParentNode.is(':hidden')|| parentCount == 0){
            parentCount++;
     		jqTreeParentNode.show();
     		self.expandParent(jqTreeId,parentNode[i]);
				 } 
             }else{
            	 $(parentNode[i].target).hide();
             } 
         } 
     }
},
expandParent: function(jqTreeId,node){ //展开父节点
    var parent = node; 
    var t = true; 
    do { 
	    parent = $('#'+jqTreeId).tree('getParent',parent.target); //获取此节点父节点 
	    if(parent){ //如果存在 
	        t=true; 
	        $('#'+jqTreeId).tree('expand',parent.target); 
	    }else{ 
	        t=false; 
	    } 
    }while (t);            
}