首頁 > 開發者 > JavaScript
jquery ztree實現模糊搜尋功能，jqueryztree
本文分享了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">
以上就是jquery ztree實現模糊搜尋功能的代碼，希望對大家的學習有所協助。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
