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 支持的标准 数据结构(嵌套结构)

  1. [
  2. { name:"父节点1", children: [
  3. { name:"父节点11", children: [
  4. { name:"叶子节点111"},
  5. { name:"叶子节点112"},
  6. ]},
  7. { name:"父节点12", children: [
  8. { name:"叶子节点121"},
  9. { name:"叶子节点122"},
  10. ]},
  11. { name:"父节点13", isParent:true}
  12. ]}
  13. ]

但是后端生成这种数据时,如果只是利用 拼字符串的方式会比较繁琐,所以 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 属性

猜你喜欢

转载自mr-lee11.iteye.com/blog/2342106