關於zTree樹形外掛搜尋框。
今天學習了一個zTree樹形搜尋框的功能，學習之前先把zTree的相關知識看了一遍，記錄下來如下：
1.獲取 id 為 treeDemo 的 zTree 物件
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");2.zTree 初始化方法，建立 zTree 必須使用此方法
var zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
obj jQuery Object
用於展現 zTree 的 DOM 容器
3.查詢isHidden = true的節點資料
nodes = zTree.getNodesByParam("isHidden", true);
getNodesByParam:根據節點資料的屬性搜尋，獲取條件完全匹配的節點資料 JSON 物件集合
例如： 查詢 name = "test" 的節點資料
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodesByParam("name", "test", null);
4.初始化 zTree 時，如果節點設定 isHidden = true，會被自動隱藏
true 表示被隱藏
false 表示被顯示
例如：檢視第一個根節點是否被隱藏
var treeObj = $.fn.zTree.getZTreeObj("tree");
var sNodes = treeObj.getNodes();
if (sNodes.length > 0) {
var isHidden = sNodes[0].isHidden;
}
showNodes:顯示所有的節點。
5.expandAll
var searchStr = $('#org').val();//通過id為org獲取頁面上輸入的值
expandAll:展開全部節點
var treeObj = $.fn.zTree.getZTreeObj("tree");
treeObj.expandAll(true);
6.transformToArray
將 zTree 使用的標準 JSON 巢狀格式的資料轉換為簡單 Array 格式。
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.transformToArray(treeObj.getNodes());
n.name.indexOf(searchStr) >= 0
indexOf() 方法可返回某個指定的字串值在字串中首次出現的位置。
如果找到一個 searchStr，則返回 searchStr 的第一次出現的位置。n.name 中的字元位置是從 0 開始的。
如下是具體實現程式碼：
（1）jsp上的input框，引入js：<script type="text/javascript" src="resource/js/xxxxx.js"></script>
<input type="text" class="form-control" id="searchId" oninput="showSelected('searchId','treeDemo')"
style="width:60%;margin-left:5%;height:22px;" placeholder="請輸入檢索內容"/>
(2)具體js
xxxxx.js
內容：
備註：頁面中必須匯入ztree的相關js
//將所有隱藏的節點顯示出來。
function refreashNodes(treeDemo) {
var zTree = $.fn.zTree.getZTreeObj(treeDemo),
nodes = zTree.getNodesByParam("isHidden", true);
zTree.showNodes(nodes);
}
function showSelected(searchId,treeDemo){
var searchStr = $('#searchId').val();//通過id獲取頁面輸入的值
if (searchStr=='') {
refreashNodes(treeDemo);
zTree.expandNode(zTree.getNodeByParam("level", "0", null), true);
return
}
var zTree = $.fn.zTree.getZTreeObj(treeDemo);
var allNodes = zTree.transformToArray(zTree.getNodes());
var nodes = new Array();
$.each( allNodes, function(i, n){ //each用於陣列遍歷
if (n.NAME.indexOf(searchStr) >= 0 || n.PINYIN.indexOf(searchStr.toUpperCase()) >= 0) { //indexOf() 方法可返回某個指定的字串值在字串中首次出現的位置（若出現至少是0或者大於0，若不出現，就不執行push方法了）。
nodes.push(n); //push() 方法可向陣列的末尾新增一個或多個元素，並返回新的長度。
}
});
zTree.hideNodes(allNodes); //隱藏所有節點
if(nodes.length == 0){
return
}
var resultNodes = new Array();
$.each( nodes, function(i, n){
var tempNode = n;
for(var i=0;i< n.level;i++){
tempNode = tempNode.getParentNode();//獲取當前被選中的節點的父節點
resultNodes.push(tempNode);
}
});
resultNodes = resultNodes.concat(nodes); //concat() 方法用於連線兩個或多個數組。該方法不會改變現有的陣列，而僅僅會返回被連線陣列的一個副本。
zTree.showNodes(resultNodes);
zTree.expandAll(true);
}
以上即實現了功能，資料庫裡面必須由NAME和PINYIN欄位，而且要大寫，因為json是要區分大小寫的，請注意，本人就遇到過坑。
還有一種是用<%@include file="/jsp/common/xxxxx.jsp" %>Include指令來引入的jsp介面，具體實現過程與這個類似，這個下篇介紹。