ztree初级

zTree 是一个 jQuery 的树插件

下载 zip 包后，解压会发现有以下目录：

api 这里面是 所有的 API 文档

css 这里面是 所有需要的 css & image

demo 这里面是 所有的 Demo 源码

js 这里面是 zTree 的 js 文件

 

 setting 配置文件

 zTree 初始化时，对于各项功能的开关以及配置主要都依靠 setting 参数的设置。

  setting.async

关于 zTree 异步加载 的配置全都在这里。

• ajax 对应参数配置

• 获取数据预处理函数配置（dataFilter）

• 获取数据时的 url 以及 对应参数配置

 

异步加载的特性

顾名思义“同步”就是前面的语句不执行完就不会执行后面的语句，“异步”就不一样了，发起异步请求后，不管是否得到结果，都不影响当前代码的后续执行。

setting.callback

关于 zTree 回调 的配置全在这里。

• before 开头的回调是对应操作生效之前触发的

• on 开头的回调是对应操作生效之后触发的

• 异步加载、勾选、单击、双击、拖拽、展开、折叠、鼠标点击、删除节点、重命名节点 等操作都会有对应的回调被触发

• 由于早期设计不合理， 因此自定义控件的相关 回调是在 setting.view 内。

  setting.check

关于 zTree 单选框/复选框 的配置全在这里。

• 单选 或 复选 类型配置

• 父子勾选的关联关系配置

• 单选、复选框 的其他细节控制配置

  setting.data

关于 zTree 数据的配置全在这里。包括：

• 简单数据模式配置

• setting.data.simpleData.enable = true

zTree 支持的标准 数据结构（嵌套结构）

2. [
4. { name:"父节点1", children: [
6. { name:"父节点11", children: [
8. { name:"叶子节点111"},
10. { name:"叶子节点112"},
12. ]},
15. { name:"父节点12", children: [
17. { name:"叶子节点121"},
19. { name:"叶子节点122"},
21. ]},
24. { name:"父节点13", isParent:true}
26. ]}
28. ]

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

zTree 支持的简单数据结构

想使用简单数据结构，一定要设置：

var setting = {

data: {

simpleData: {

enable:true,

idKey: "id",

pIdKey: "pId",

rootPId: ""

}

}

}

 

上面的数据，转成简单数据结构如下：

```

[

{ id: 1, pId: 0, name:"父节点1" },

{ id: 11, pId: 1, name:"父节点11" },

{ id: 111, pId: 11, name:"叶子节点111" },

{ id: 112, pId: 11, name:"叶子节点112" },

{ id: 12, pId: 1, name:"父节点12" },

{ id: 121, pId: 12, name:"叶子节点121" },

]

利用 节点数据的 icon / iconOpen / iconClose 属性实现自定义图标

是否显示连接线请设置 setting.view.showLine 属性