zTree -- Jquery树插件使用

zTree Jquery树插件使用

zTree API

1.引用zTree

<link rel="stylesheet" type="text/css" href="zTreeStyle.css" />
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="jquery.ztree.core.js"></script>

2. zTree容器

* 注：class属性必须为 “ztree”

<ul id="treeDemo" class="ztree" style="width:auto;height:500px;overflow:auto"></ul>

容器的样式 （选用）

ul.ztree {
  margin-top: 10px;
  border: 1px solid #617775;
  background: #f0f6e4;
  width: 220px;
  height: 360px;
  overflow-y: scroll;
  overflow-x: auto;
}

3. js实现

1. 配置项

var setting = {
    data: {
       simpleData: {
         enable: true,  // 是否使用简单Array数据 默认false
         idKey: 'id',   // 节点唯一标识 enable为true
         pIdKey: 'parentId', // 父节点标识 enable为true
         rootPId: 0     //用于修正根节点父节点数据，即 pIdKey 指定的属性值。
       },
    },
    callback: {
       onClick: 函数名称  // 点击节点触发
    }
}

2. zTree 数据

* 注意事项

1. 格式 json
2. 数据不需做任何处理（不需要按层级排列），按照所需属性组织数据即可
3. zTree 所需数据参数属性变量名 name 不能改变
4. 除子节点、名称、父节点三个参数属性以外，可以添加自定义属性

格式：

// 此处id partnetId对应setting的idKey pIdKey对应
var data = [{id:"1",name:"数据1", partnetId:"0"},
            {id:"4"，name："数据4",partnetId:"3"},
            {id:"2",name:"数据2",partnerId:"1"},
            {id:"3",name:"数据3"，partnerId:"1"}]

3. zTree 树初始化

var treeNodes = eval(data);   //把后台封装好的简单Json格式赋给treeNodes
var zTree = $.fn.zTree.init($("#treeDemo"), setting, treeNodes);//创建zTree必须使用的方法
var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //参数：容器ID
treeObj.expandAll(true); // 打开全部
var nodes = treeObj.getNodes();//获取zTree全部节点数据
if (nodes.length > 0) { 
  treeObj.selectNode(nodes[0]);//选中指定节点
  //执行其他事件...
}