位置: 编程技术 - 正文
jQuery树形控件zTree使用小结(html5 树形控件)
编辑：rootadmin推荐整理分享jQuery树形控件zTree使用小结(html5 树形控件)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery 树形菜单插件,jquery树形结构,html树形控件,js树形控件,js树形控件,js树形控件,js树形控件,jquery树形结构,内容如对您有帮助，希望把文章链接给更多的朋友！
0 zTree简介
树形控件的使用是应用开发过程中必不可少的。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
0.0 zTree的特点 &#;最新版的zTree将核心代码按照功能进行了分割，不需要的代码可以不用加载，如普通使用只需要加载核心的jquery.ztree.core-3.5.js，需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js，需要使用编辑功能加载jquery.ztree.exedit-3.5.min.js &#;采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀 &#;兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器 &#;支持 JSON 数据 &#;支持静态 和 Ajax 异步加载节点数据 &#;支持任意更换皮肤 / 自定义图标（依靠css） &#;支持极其灵活的 checkbox 或 radio 选择功能 &#;提供多种事件响应回调 &#;灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽 &#;在一个页面内可同时生成多个 Tree 实例 &#;简单的参数配置实现，灵活多变的功能
0.1 zTree文件介绍 从zTree官网下载的zTree包括以下组成部分
&#;metroStyle文件夹：zTree的metro风格样式相关文件（图片及css样式表）。&#;zTreeStyle文件夹：zTree的标准风格样式文件夹（图片及css样式表）&#;js文件：zTree.all.js是完整的js库，可单纯加载此文件实现所有zTree功能，ztree.core、ztree.excheck、ztree.exedit、ztree.exhide是对ztree按照功能进行的分割，分别对应基本功能、复选功能、编辑功能、显隐功能。
1 zTree的基本使用
1.0 zTree的创建在页面中添加对zTree的js及css引用，由于zTree基于JQuery，JQuery的引用是必须的。
运行结果如下
1.1 zTree的配置zTree的配置采用Json格式，按照配置的类型分为view（可视界面相关配置）、data（数据相关配置）、check（复选框相关配置）、callback（各类事件的回调函数配置）、async（zTree异步加载配置），一下是我们经常会使用到的一些配置及说明，其他详细配置可以参考zTree官方API文档的详细介绍。
需要注意的是，zTree的事件回调部分，基本上每一个事件都对应一个beforeXXX事件，比如onClick事件对应有一个beforeOnClick事件，主要用于控制相关事件是否允许执行，如果before事件返回false，则取消执行对应相关事件。
1.2 zTree的数据格式 zTree的每一个节点都是一个treeNode对象，treeNode对象经常用到的属性和方法如下：
zTree的数据源一般有标准数据格式、简单数据格式两种，标准数据格式通过指定节点的chidren属性构建层级关系，而简单数据格式根据根据id，pid属性构建层级关系，我们在应用开发中使用关系型数据库，一般采用的都是简单数据格式。 标准数据格式
简单数据格式
注意zTree的默认配置是不启用简单数据格式，使用简单数据格式一定要在setting中进行简单数据格式的相关配置。
1.3 zTree的常用方法zTree的主要操作方法介绍如下 获取zTree对象：var treeObj = $.fn.zTree.getZTreeObj("tree");增加节点：addNodes(parentNode,index,newNodes,isSlient)
parentNode:指定的父节点，如果增加根节点，请设置 parentNode 为 null 即可
index:新节点插入的位置（从 0 开始），index = -1 时，插入到最后，此参数可忽略
newNodes：需要增加的节点数据 JSON 对象集合，数据只需要满足 zTree 的节点数据必需的属性即可
isSilent：true 时，添加节点后不展开父节点，其他值或缺省状态都自动展开
勾选或取消勾选全部节点：checkAllNodes(checked); checked参数为true时全部勾选，为false时全部取消勾选。 勾选或取消勾选单个节点：checkNode(node, checked, checkedTypeFlag，callbackFlag); node：要进行操作的节点 checked：为true勾选，为false取消勾选 checkeTypeFlag:为true表示对当前结点的子节点及父节点进行勾选状态的联动，为false不联动 callbackFlag:为true时表示执行beforeOnCheck和onCheck事件的回调函数，为false不执行 编辑节点 edit(node); 使节点处于编辑状态，必须引用jquery.ztree.exedit 扩展。 展开或折叠全部节点：expandAll(expand); expand为true是展开所有节点，为false是折叠所有节点。 根据节点属性查找结点：getNodesByParam(key,value, parentNode); key:属性名 value:属性值 parentNode:是否在指定节点下查找，为null表示整个树查找。 获取被勾选或未被勾选的节点集合：getCheckedNodes(checked); checked为true表示获取所有被勾选的节点集合，为false表示所有未被勾选的节点集合 获取输入框勾选状态被改变的节点集合：getChangeCheckedNodes()
2 zTree的常用操作2.0 ajax请求数据并创建zTree
后台代码如下，可以根据需要返回你想要的任何数据，绑定到zTree上，然后通过treeNode.属性名取到对应的值，实现一些界面逻辑操作。
2.1 节点单击操作 节点单击事件会捕获事件对象e，zTree的唯一标识treeId，当前选中的节点对象treeNode三个参数。根据实际需求可获取treeNode中包含的任何属性数据，进行相关操作
2.2 节点复选框事件
一般情况下我们会直接使用treeObj.getCheckedNodes(true);获取所有选中的节点，然后遍历所有选中的节点进行相关操作，当面对大数据量时，这种操作方法便不可取，可通过getChangeCheckedNodes()方法获取勾选状态被改变的节点集合，值针对状态改变的节点做相应处理。
2.3 实现zTree的右键增删改操作首先定义右键弹出面板
实现zTree右键单击事件回调函数
新增节点
编辑节点
节点编辑状态离开时触发事件
删除节点数据
2.4 一些总结 我们通常使用到树形控件做授权或关联类似的操作，一般会先全部取消勾选，然后根据选中的数据关联对树控件的复选框进行选中操作，在大数据量时，大约几万条数据，全部取消勾选+根据关联数据勾选相关节点这个操作通过js执行会很慢，这种情况建议在后台通过关联关系重新组织zTree需要的数据源，对每条数据（对应树节点）设置checked属性，然后再前台页面重新加载树，这种操作速度要快得多。
更多关于ztree控件的内容，请参考专题《jQuery插件ztree使用汇总》
标签: html5 树形控件
本文链接地址:https://www.jiuchutong.com/biancheng/384118.html 转载请保留说明！
](https://www.jiuchutong.com/image/20240129/1706501379.jpg)
