本文分享了jquery ztree實現模糊搜索功能兩個實例，供大家參考，具體內容如下
ztree官方demo代碼里的:
根據參數查找節點
以上文件修改成如下代碼
<!DOCTYPE html><HTML><HEAD> <TITLE> ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../../../css/demo.css" type="text/css"> <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.exhide-3.5.js"></script><!--<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>--> <SCRIPT type="text/javascript"> var setting = { data: { key: { title: "t" }, simpleData: { enable: true } } }; var zNodes =[ { id:1, pId:0, name:"節點屬性搜索演示 1", t:"id=1"}, { id:11, pId:1, name:"關鍵字可以是名字", t:"id=11"}, { id:12, pId:1, name:"關鍵字可以是level", t:"id=12"}, { id:13, pId:1, name:"關鍵字可以是id", t:"id=13"}, { id:14, pId:1, name:"關鍵字可以是各種屬性", t:"id=14"}, { id:2, pId:0, name:"節點搜索演示 2", t:"id=2"}, { id:21, pId:2, name:"可以只搜索一個節點", t:"id=21"}, { id:22, pId:2, name:"可以搜索節點集合", t:"id=22"}, { id:23, pId:2, name:"搜我吧", t:"id=23"}, { id:3, pId:0, name:"節點搜索演示 3", t:"id=3"}, { id:31, pId:3, name:"我的 id 是: 31", t:"id=31"}, { id:32, pId:31, name:"我的 id 是: 32", t:"id=32"}, { id:33, pId:32, name:"我的 id 是: 33", t:"id=33"} ]; function focusKey(e) { if (key.hasClass("empty")) { key.removeClass("empty"); } } function blurKey(e) { if (key.get(0).value === "") { key.addClass("empty"); } } var lastValue = "", nodeList = [], fontCss = {}; function clickRadio(e) { lastValue = ""; searchNode(e); } function searchNode(e) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); if (!$("#getNodesByFilter").attr("checked")) { var value = $.trim(key.get(0).value); var keyType = ""; if ($("#name").attr("checked")) { keyType = "name"; } else if ($("#level").attr("checked")) { keyType = "level"; value = parseInt(value); } else if ($("#id").attr("checked")) { keyType = "id"; value = parseInt(value); } if (key.hasClass("empty")) { value = ""; } if (lastValue === value) return; lastValue = value; if (value === "") { zTree.showNodes(zTree.transformToArray(zTree.getNodes())) ; return; } if ($("#getNodeByParam").attr("checked")) { var node = zTree.getNodeByParam(keyType, value); if (node === null) { nodeList = []; } else { nodeList = [node]; } } else if ($("#getNodesByParam").attr("checked")) { nodeList = zTree.getNodesByParam(keyType, value); } else if ($("#getNodesByParamFuzzy").attr("checked")) { nodeList = zTree.getNodesByParamFuzzy(keyType, value); } } else { updateNodes(false); nodeList = zTree.getNodesByFilter(filter); } /**不查詢父級 for(var x = 0 ; x<nodeList.length ; x++){ if(nodeList[x].isParent){ nodeList.splice(x--,1); } } */ nodeList = zTree.transformToArray(nodeList); updateNodes(true); } function updateNodes(highlight) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); var allNode = zTree.transformToArray(zTree.getNodes()); zTree.hideNodes(allNode); for(var n in nodeList){ findParent(zTree,nodeList[n]); } zTree.showNodes(nodeList); } function findParent(zTree,node){ zTree.expandNode(node,true,false,false); var pNode = node.getParentNode(); if(pNode != null){ nodeList.push(pNode); findParent(zTree,pNode); } } function getFontCss(treeId, treeNode) { return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"}; } function filter(node) { return !node.isParent && node.isFirstNode; } var key; $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); key = $("#key"); key.bind("focus", focusKey) .bind("blur", blurKey) .bind("propertychange", searchNode) .bind("input", searchNode); $("#name").bind("change", clickRadio); $("#level").bind("change", clickRadio); $("#id").bind("change", clickRadio); $("#getNodeByParam").bind("change", clickRadio); $("#getNodesByParam").bind("change", clickRadio); $("#getNodesByParamFuzzy").bind("change", clickRadio); $("#getNodesByFilter").bind("change", clickRadio); }); </SCRIPT></HEAD> <BODY><h1>根據參數查找節點</h1><h6>[ 文件路徑: core/searchNodes.html ]</h6><div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> <div class="right"> <ul class="info"> <li class="title"><h2>1、getNodeByParam / getNodesByParam / getNodesByParamFuzzy 方法操作說明</h2> <ul class="list"> <li class="highlight_red">使用 zTreeObj.getNodeByParam / getNodesByParam / getNodesByParamFuzzy / getNodeByTId 方法，詳細請參見 API 文檔中的相關內容</li> <li><p>搜索試試看：<br/> 屬性值( value )：<input type="text" id="key" value="" class="empty" /><br/> 屬性( key )：<input type="radio" id="name" name="keyType" class="radio first" checked /><span>name (string)</span><br/> <input type="radio" id="level" name="keyType" class="radio" style="margin-left:68px;" /><span>level (number) ... 根節點 level = 0</span><br/> <input type="radio" id="id" name="keyType" class="radio" style="margin-left:68px;" /><span>id (number)</span><br/> 方法：<input type="radio" id="getNodeByParam" name="funType" class="radio first" /><span>getNodeByParam</span><br/> <input type="radio" id="getNodesByParam" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByParam</span><br/> <input type="radio" id="getNodesByParamFuzzy" name="funType" class="radio" style="margin-left:36px;" checked /><span>getNodesByParamFuzzy (only string)</span><br/> <input type="radio" id="getNodesByFilter" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByFilter (參考本頁源碼中 function filter)</span><br/> </p> </li> </ul> </li> <li class="title"><h2>2、setting 配置信息說明</h2> <ul class="list"> <li>不需要對 setting 進行特殊設置</li> </ul> </li> <li class="title"><h2>3、treeNode 節點數據說明</h2> <ul class="list"> <li class="highlight_red">請注意各個方法使用時保證傳入查找的參數類型與設定要查找的屬性的類型一致</li> </ul> </li> </ul> </div></div></BODY></HTML>這樣就簡單的實現了模糊搜索顯示的功能了。
第二個Ztree樹結構模糊搜索實現方法，具體內容如下
function expand_ztree(treeId){ var treeObj = $.fn.zTree.getZTreeObj(treeId); treeObj.expandAll(true); } function close_ztree(treeId){ var treeObj = $.fn.zTree.getZTreeObj(treeId); var nodes = treeObj.transformToArray(treeObj.getNodes()); var nodeLength = nodes.length; for (var i = 0; i < nodeLength; i++) { if (nodes[i].id == '0') { //根節點：展開 treeObj.expandNode(nodes[i], true, true, false); } else { //非根節點：收起 treeObj.expandNode(nodes[i], false, true, false); } } } function search_ztree(treeId, searchConditionId){ searchByFlag_ztree(treeId, searchConditionId, ""); } function searchByFlag_ztree(treeId, searchConditionId, flag){ //<1>.搜索條件 var searchCondition = $('#' + searchConditionId).val(); //<2>.得到模糊匹配搜索條件的節點數組集合 var highlightNodes = new Array(); if (searchCondition != "") { var treeObj = $.fn.zTree.getZTreeObj(treeId); highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null); } //<3>.高亮顯示并展示【指定節點s】 highlightAndExpand_ztree(treeId, highlightNodes, flag); } function highlightAndExpand_ztree(treeId, highlightNodes, flag){ var treeObj = $.fn.zTree.getZTreeObj(treeId); //<1>. 先把全部節點更新為普通樣式 var treeNodes = treeObj.transformToArray(treeObj.getNodes()); for (var i = 0; i < treeNodes.length; i++) { treeNodes[i].highlight = false; treeObj.updateNode(treeNodes[i]); } //<2>.收起樹, 只展開根節點下的一級節點 close_ztree(treeId); //<3>.把指定節點的樣式更新為高亮顯示，并展開 if (highlightNodes != null) { for (var i = 0; i < highlightNodes.length; i++) { if (flag != null && flag != "") { if (highlightNodes[i].flag == flag) { //高亮顯示節點，并展開 highlightNodes[i].highlight = true; treeObj.updateNode(highlightNodes[i]); //高亮顯示節點的父節點的父節點....直到根節點，并展示 var parentNode = highlightNodes[i].getParentNode(); var parentNodes = getParentNodes_ztree(treeId, parentNode); treeObj.expandNode(parentNodes, true, false, true); treeObj.expandNode(parentNode, true, false, true); } } else { //高亮顯示節點，并展開 highlightNodes[i].highlight = true; treeObj.updateNode(highlightNodes[i]); //高亮顯示節點的父節點的父節點....直到根節點，并展示 var parentNode = highlightNodes[i].getParentNode(); var parentNodes = getParentNodes_ztree(treeId, parentNode); treeObj.expandNode(parentNodes, true, false, true); treeObj.expandNode(parentNode, true, false, true); } } } } function getParentNodes_ztree(treeId, node){ if (node != null) { var treeObj = $.fn.zTree.getZTreeObj(treeId); var parentNode = node.getParentNode(); return getParentNodes_ztree(treeId, parentNode); } else { return node; } } function setFontCss_ztree(treeId, treeNode) { if (treeNode.id == 0) { //根節點 return {color:"#333", "font-weight":"bold"}; } else if (treeNode.isParent == false){ //葉子節點 return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#660099", "font-weight":"normal"}; } else { //父節點 return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"}; } } //==============HTML============== class="padd" style="padding-bottom: 0px;"> class="input-append row-fluid" style="margin-bottom: 0px;"> "search_condition" type="text" placeholder="請輸入搜索條件" class="span8" style="font-size:12px"/> "button" class="btn btn-info" onclick="search_ztree('dep_tree', 'search_condition')">搜索 "dep_tree" class="ztree">更多關于ztree控件的內容，請參考專題《jQuery插件ztree使用匯總》 。
以上就是jquery ztree實現模糊搜索功能的代碼，希望對大家的學習有所幫助。
新聞熱點
疑難解答
