官网：http://www.treejs.cn/v3/main.php

1.引入所需文件

import 'static/plugins/ztree/metroStyle/metroStyle.css'   // 将 zTree 的 css 目录 复制到项目目录内,并引入
import 'static/plugins/ztree/js/jquery-1.4.4.min' // jquery-1.4.4.min.js 复制到项目目录内,并引入
import 'static/plugins/ztree/js/jquery.ztree.core.min' // jquery.ztree.core 是 zTree 的核心库
import 'static/plugins/ztree/js/jquery.ztree.excheck.min' // jquery.ztree.excheck 是 zTree 关于 复选框/单选框 的扩展库
import 'static/plugins/ztree/js/jquery.ztree.exhide.min' // jquery.ztree.exhide 是 zTree 关于 节点隐藏 的扩展库
import 'static/plugins/ztree/js/jquery.ztree.exedit .min'// jquery.ztree.exedit 是 zTree 关于 编辑操作的扩展库
jquery.ztree.all // jquery.ztree.all 是  core + excheck + exedit 的组合（不包含 exhide）

使用 zTree 提供的不同 属性/方法 时，请务必检查该 属性/方法 是否存在于你加载的 zTree 库内？

2.创建zTree 容器

<ul id="treeId" class="ztree"></ul>

3.初始化 zTree

var zTreeObj;
var setting = {}; // zTree 的参数配置
var zNodes = [  // zTree 的数据属性
   {name:"test1", open:true, children:[    // open:展开，默认关闭
   {name:"test1_1"}, {name:"test1_2"}]},
   {name:"test2", open:true, children:[
   {name:"test2_1"}, {name:"test2_2"}]}
]

$(document).ready(function(){
  zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

4 数据格式（JSON）

• zTree 支持的是 Object 对象，不是 String
• 可以随意添加任意的自定义属性，用于传递各种数据。但一定注意，不要与 API 中 treeNode 的属性产生冲突
• 对于 setting.data.key 替换的属性，一旦设定， 整棵树所有的节点都要满足此规则

4.1标准数据结构

但是后端生成这种数据时，会比较繁琐，所以 zTree 为了减少用户的麻烦， 还支持类似数据表的单层结构。

4.2简单数据结构

• setting.data.simpleData.enable = true
• id、pId 可以替换：setting.data.simpleData.idKey
• 根节点 的 pId 值默认为 null，如果不想设置为 null，可以设置：setting.data.simpleData.rootPId
  
  image.png
• 一旦开启 简单数据模式，拖拽节点后，zTree 会自动修正节点的 pId 值