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

本文到此結束