轉自：http://www.cnblogs.com/linjiqin/p/4547452.html
1.首先在頁面上有<ul/>標簽
|
1
|
<ul id=
"tree"
class
=
"ztree"
></ul>
|
2.定義ztree的配置參數
|
1
2
3
4
5
6
7
8
9
10
11
|
var
setting = {
//check屬性放在data屬性之后，復選框不起作用
check: {
enable:
true
},
data: {
simpleData: {
enable:
true
},
}
};
|
3.獲得ztree所要綁定的數據,可以使用靜態數據也可以使用ajax獲取的數據
a)Ztree的數據有兩種格式,標准格式如下:
標准的 JSON 數據需要嵌套表示節點的父子包含關系
例如：
|
1
2
3
4
5
6
7
8
9
10
|
var
nodes = [
{
name:
"父節點1"
,
open:
true
,
children: [
{name:
"子節點1"
},
{name:
"子節點2"
}
]
}
];
|
b)簡單數據格式如下(推薦使用):
簡單模式的 JSON 數據需要使用 id/pId表示節點的父子包含關系，如使用其他屬性設置父子關聯關系請參考setting.data.simple內各項說明
例如：
|
1
2
3
4
5
|
var
nodes = [
{id:1, pId:0, name:
"父節點1"
},
{id:11, pId:1, name:
"子節點1"
},
{id:12, pId:1, name:
"子節點2"
}
];
|
簡單數據的id,pId,name,title都可以在setting的data中進行配置,指定相應的字段。
在setting的data中配置simpleData為enable:true即表示使用簡單數據格式,不配置或配置為false則為標准數據格式.
|
1
2
3
4
5
6
7
|
var
setting = {
data: {
simpleData: {
enable:
true
}
}
};
|
4.初始化ztree生成樹
|
1
|
$.fn.zTree.init($(
"#tree"
), setting, nodes);
|
第一個參數是<ul/>id選擇的jquery對象,第二個參數是配置的setting,第三個參數是獲取到的數據.
5.zTreeObj樹對象
zTreeObj是樹的對象,獲取到zTreeObj對象后就可以使用ztree的N多方法來操作樹,獲取方式:
var treeObj = $.fn.zTree.getZTreeObj("tree"); //參數為樹的id
具體方法都有哪些參見api的zTreeObj部分
a)zTreeObj.getNodeByParam(key, value, parentNode)根據節點數據的屬性搜索，獲取條件完全匹配的節點數據 JSON 對象。
Key：需要精確匹配的屬性名稱
Value：需要精確匹配的屬性值，可以是任何類型，只要保證與 key 指定的屬性值保持一致即可
parentNodeJSON：搜索范圍，指定在某個父節點下的子節點中進行搜索，忽略此參數，表示在全部節點中搜索
返回值JSON
匹配精確搜索的節點數據
1、如無結果，返回 null
2、如有多個節點滿足查詢條件，只返回第一個匹配到的節點
vartreeObj = $.fn.zTree.getZTreeObj("tree");
var node = treeObj.getNodeByParam("id", 1, null);
b)zTreeObj.getNodes()獲取zTree的全部節點數據，返回值Array(JSON)
vartreeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodes();
c)zTreeObj.getSelectedNodes()獲取zTree當前被選中的節點數據集合，返回值Array(JSON)
vartreeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();
d)zTreeObj.expandAll(flag) 展開/折疊全部節點
flag Boolean true表示展開,false表示折疊
返回值Boolean
返回值表示最終實際操作情況
true 表示展開全部節點
false 表示折疊全部節點
null 表示不存在任何父節點
vartreeObj = $.fn.zTree.getZTreeObj("tree");
treeObj.expandAll(true);
e)zTreeObj.expandNode(treeNode, expandFlag, sonSign, focus, callbackFlag)展開/折疊指定的節點
treeNodeJSON：需要展開 / 折疊的節點數據
請務必保證此節點數據對象是zTree內部的數據對象
expandFlagBoolean
expandFlag = true 表示展開節點
expandFlag = false 表示折疊節點
省略此參數，則根據對此節點的展開狀態進行 toggle 切換
sonSignBoolean
sonSign = true 表示全部子孫節點進行與expandFlag相同的操作
sonSign = false 表示只影響此節點，對於其子孫節點無任何影響
sonSign = false 且treeNode.open = expandFlag時，不會觸發回調函數，直接返回
省略此參數，等同於 false
focusBoolean
focus = true 表示展開 / 折疊操作后，通過設置焦點保證此焦點進入可視區域內
focus = false 表示展開 / 折疊操作后，不設置任何焦點
省略此參數，等同於 true
callbackFlagBoolean
callbackFlag = true 表示執行此方法時觸發beforeExpand / onExpand或beforeCollapse / onCollapse事件回調函數
callbackFlag = false 表示執行此方法時不觸發事件回調函數
省略此參數，等同於 false
返回值Boolean
返回值表示最終實際操作情況
true 表示展開節點
false 表示折疊節點
null 表示不是父節點
vartreeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();
if (nodes.length>0) {
treeObj.expandNode(nodes[0], true, true, true);
}
6.treeNode樹節點對象
每一個treeNode對象都有N多屬性和方法,具體參見api的treeNode部分
常用示例:
a)treeNode.isParent判斷節點是否是父節點
b)treeNode.name節點名稱
c)treeNode.children獲取節點的子節點數據集合
d)treeNode.getParentNode獲取父節點
e)treeNode.level獲取節點的層級,根節點的level為0
f)treeNode.tId生成的樹的節點的html id,區別於主鍵id
g)treeNode.parentTId獲取的父節點的tId
h)綁定到樹上的其他字段可以通過treeNode對象直接獲取,如:treeNode.phone