视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
无限树Jquery插件zTree的常用功能特性总结_jquery
2020-11-27 21:27:14 责编:小采
文档


其实Ztree官网已经有详细的API文档,一切以官网上的说明为准,我在此只是结合实践总结几条常用的ztree的功能特性.

(ztree的语法结构是基于key-value的形式配置)

1:支持异步加载数据

语法配置:



简要说明:

enable :设置 zTree 是否开启异步加载模式.

url:Ajax 获取数据的 URL 地址.

otherParam:Ajax 请求提交的静态参数键值对.相当于ajax中的data参数.

2:加载数据并绑定,一般都是定义数据结构实体即model,此数据结构要包含层级关系通常包括:ID,父ID,Name.

然后配置语法:



或者



简要说明:

simpleData:即可采用数组作为数据源绑定.此时异步加载的数据可为平行结构.

children: 指定节点数据中保存子节点数据的属性名称,此时异步加载的数据为树的折叠结构;所以后端加载数据时要使用递归算法.

3:支持单选,复选功能

语法配置:



简要说明:

enable:设置 zTree 的节点上是否显示 checkbox / radio

chkStyle:勾选框类型(checkbox 或 radio)

radioType:radio 的分组范围

chkboxType:勾选 checkbox 对于父子节点的关联关系

checked:为加载数据后复选框是否勾选.IsChecked为后端数据结构model中定义的字段.

4:支持添加子节点,编辑节点,删除节点事件

我这里介绍如何采用自定义添加,编辑,删除按钮的方式

语法配置:



其中addHoverDom 函数为:



其中removeHoverDom函数为:



简要说明:

addHoverDom:用于当鼠标移动到节点上时,显示用户自定义控件,显示隐藏状态同 zTree 内部的编辑、删除按钮

removeHoverDom:用于当鼠标移出节点时,隐藏用户自定义控件,显示隐藏状态同 zTree 内部的编辑、删除按钮

下载本文
显示全文
专题