Ztree使用方法.docx

Ztree使用方法

1. 首先在页面上有<ul/>标签
<ul id="tree" class="ztree"></ul>
2. 定义ztree的配置参数
var setting = {
view : {
selectedMulti : false
},
data : {
key : {
title : "valuesName",
name : "valuesName"
},
simpleData : {
enable : true,
idKey : "dataValues",
pIdKey : "parentId"
}
},
check : {
enable : false
},
callback : {
onClick : onClick
}
};
以上是常用配置,具体参见ztree api 的setting部分

3. 获得ztree所要绑定的数据,可以使固定数据也可以使ajax获取的数据
a) Ztree的数据有两种格式,标准格式如下:
o 标准的 JSON 数据需要嵌套表示节点的父子包含关系
例如：
var nodes = [
{name: "父节点1",open:true, children: [
{name: "子节点1"},
{name: "子节点2"}
]}
];
b) 简单数据格式如下(推荐使用):
o 简单模式的 JSON 数据需要使用 id / pId 表示节点的父子包含关系，如使用其他属性设置父子关联关系请参考 setting.data.simple 内各项说明
例如：
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则为标准数据格式.
var setting = {
data: {
simpleData: {
enable: true
}
}
};

4. 初始化ztree生成树
$.fn.zTree.init($("#tree"), setting, nodes);
第一个参数是<ul/>id选择的jquery对象,第二个参数是配置的setting,第三个参数是获取到的数据.

例子:
HTML中
<ul id="tree" class="ztree"></ul>
Js中
var setting = {
view : {
selectedMulti : false
},
data : {
key : {
title : "valuesName",
name : "valuesName"
},
simpleData : {
enable : true,
idKey : "dataValues",
pIdKey : "parentId"
}
},
check : {
enable : false
},
callback : {
onClick : onClick
}
};

function onClick(event, treeId, treeNode, clickFlag) {
alert("treeId:" + treeId + " name:" + treeNode.name + " level:"
+ treeNode.level + " tid:" + treeNode.tId + " parentTId:"
+ treeNode.parentTId + " children:" + treeNode.children);
}

$(function() {

$.fn.zTree.init($("#tree"), setting, $.parseJSON(tdata));
}

5. zTreeObj树对象
zTreeObj是树的对象,获取到zTreeObj对象后就可以使用ztree的N多方法来操作树,获取方式:
var treeObj = $.fn.zTree.getZTreeObj("tree"); //参数为树的id

具体方法都有哪些参见api的zTreeObj部分
常用方法介绍:
a) zTreeObj.getNodeByParam (key, value, parentNode)根据节点数据的属性搜索，获取条件完全匹配的节点数据 JSON 对象
Key String
需要精确匹配的属性名称
Value ?
需要精确匹配的属性值，可以是任何类型，只要保证与 key 指定的属性值保持一致即可
parentNode JSON
搜索范围，指定在某个父节点下的子节点中进行搜索
忽略此参数，表示在全部节点中搜索
返回值JSON
匹配精确搜索的节点数据
1、如无结果，返回 null
2、如有多个节点满足查询条件，只返回第一个匹配到的节点

var treeObj = $.fn.zTree.getZTreeObj("tree");
var node = treeObj.getNodeByParam("id", 1, null);

b) zTreeObj.getNodes()获取 zTree 的全部节点数据
返回值Array(JSON)
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodes();

c) zTreeObj.getSelectedNodes()获取 zTree 当前被选中的节点数据集合
返回值Array(JSON)
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();

d) zTreeObj.expandAll(flag) 展开 / 折叠 全部节点
flag Boolean true表示展开,false表示折叠
返回值Boolean
返回值表示最终实际操作情况
true 表示 展开 全部节点
false 表示 折叠 全部节点
null 表示 不存在任何父节点
var treeObj = $.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 表示 不是父节点
var treeObj = $.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