转自：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