easyui-tree的本地搜索功能

框架: Jquery. Easyui

实现一种不需要从服务器中进行查询,直接在前端对tree的折叠,展开,高亮的模糊搜索功能.子节点均不匹配,则收起. 有一个或以上的子节点匹配到,则展开

效果如下图

直接上代码

//高亮的样式
.tree-node-searched {
	background: #feed81;
	color: #404040;
}

<ul id="classTree" class="easyui-tree" style="margin-top:10px;"
				data-options="
				checkbox : false,
				onLoadSuccess : loadSuccess ,
				url:'${basePath }test/treeData'"></ul>

            //搜索
			function search(){
				var value = $("input[name=search]").val();
				var search_content = $.trim(value);
				var parentNode=$("#classTree").tree("getRoots"); //得到tree顶级node
				$(".tree-node-searched").removeClass("tree-node-searched");
				if(search_content == ""){
					$("#classTree").tree("expandAll"); //展开所有
					$("#searchResult").html("未输入查询条件");
				}else{
					$("#classTree").tree("collapseAll"); //折叠所有
					searchTree(parentNode, search_content);
				}
			}

			function searchTree(parentNode,searchCon){
				var children;
				var matchedNodeList = [];
				for(var i=0;i<parentNode.length;i++){ //循环顶级 node
					children = $("#classTree").tree("getChildren",parentNode[i].target);//获取顶级node下所有子节点
					if(children){ //如果有子节点
						for(var j = 0 ; j < children.length ; j++){ //循环所有子节点
							if(children[j].text.indexOf(searchCon)>=0){ //判断节点text是否包含搜索文本
								expandParent(children[j]);
								matchedNodeList.push(children[j]);
							}
						}
					}
					if(parentNode[i].text.indexOf(searchCon)>=0){
						expandParent(parentNode[i]);
						matchedNodeList.push(parentNode[i]);
					}
				}
				$("#searchResult").html("查询到"+matchedNodeList.length+"条结果");
				for (var i=0; i<matchedNodeList.length; i++) {
					showMatchedNode(matchedNodeList[i]);
				}
				if(matchedNodeList.length == 0){
					$("#orgTree").tree("expandAll"); //展开所有
				}
			};

			//展开匹配结果的父节点
			function expandParent(node){
				var parent = node;
				var t = true;
				do {
					parent = $("#classTree").tree("getParent",parent.target); //获取此节点父节点
					if(parent){ //如果存在
						t=true;
						$("#classTree").tree("expand",parent.target);
					}else{
						t=false;
					}
				}while (t);
			};

			//高亮显示匹配结果
			function showMatchedNode(node) {
				//展示所有父节点
				$(node.target).show();
				$(".tree-title", node.target).addClass("tree-node-searched");
			}

本文到此结束