今天學習了乙個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)
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：
(2)具體js
***xx.js
內容：//將所有隱藏的節點顯示出來。
function refreashnodes(treedemo)
function showselected(searchid,treedemo)
var ztree = $.fn.ztree.getztreeobj(treedemo);
var allnodes = ztree.transformtoarray(ztree.getnodes());
var nodes = new array();
$.each( allnodes, function(i, n)
});ztree.hidenodes(allnodes); //隱藏所有節點
if(nodes.length == 0)
var resultnodes = new array();
$.each( nodes, function(i, n)
});resultnodes = resultnodes.concat(nodes); //concat() 方法用於連線兩個或多個陣列。該方法不會改變現有的陣列，而僅僅會返回被連線陣列的乙個副本。
ztree.shownodes(resultnodes);
ztree.expandall(true);
}以上即實現了功能，資料庫裡面必須由name和pinyin欄位，而且要大寫，因為json是要區分大小寫的，請注意，本人就遇到過坑。
還有一種是用<%@include file="/jsp/common/***xx.jsp" %>include指令來引入的jsp介面，具體實現過程與這個類似，這個下篇介紹。
JQuery 有關於 ZTree 外掛程式
var ztree1 var setting var retrunobj setting async url portal inventorytypeaction gettree.action data callback beforecollapse function onclick ztreeon...
ztree樹形選單demo
閱讀目錄 回到頂部 ztree樹形選單 樹形選單使用方式如下 html引入的方式如下 doctype html html head meta charset utf 8 title ztree樹形選單demo title link rel stylesheet href libs ztreestyl...
zTree模糊搜尋
根據搜尋的值重新顯示整個ztree 1 輸入框 2 js chatgroupserarchbtn click function function doqueryalg4name value treeobj.shownodes nodelist 指定被顯示的節點 json 資料集合 if value ...