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 支持的标准 数据结构(嵌套结构)
[
{ name:"父节点1", children: [
{ name:"父节点11", children: [
{ name:"叶子节点111"},
{ name:"叶子节点112"},
]},
{ name:"父节点12", children: [
{ name:"叶子节点121"},
{ name:"叶子节点122"},
]},
{ name:"父节点13", isParent:true}
]}
]
但是后端生成这种数据时,如果只是利用 拼字符串的方式会比较繁琐,所以 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 属性