ztree学习笔记

Posted 2020-09-22

    在项目当中，经常会用到ztree树形插件，之前做的几个项目当中都用到了这个插件，感觉功能还是很强大的，而且在网上还找到了中文的API，因为项目中的树形结构不是自己做的，所以现在从头学习一下，并且记录一下学习的过程。

   先简单介绍一下ztree。

 

   ztree是一款依靠jQuery实现的“树形”插件，它的特点是性能优异，配置灵活，功能强大，经常用于一些项目的功能管理和权限管理上，我自己接触的几个项目上的功能管理和权限管理上就用到了ztree插件。先向大家推荐一下ztree的中文API，个人觉得这个API对学习ztree很有帮助。网站是http://www.treejs.cn/v3/demo.php#_101。希望对学习ztree的朋友有所帮助。

ztree有三个js文件jquery.ztree.core-3.x.js，jquery.ztree.excheck-3.x.js，jquery.ztree.exedit-3.x.js

使用ztree时必须用到的是核心包 jquery.ztree.core-3.x.js，此外还需要引入一个zTreeStyle1.css文件，此文件是ztree的样式。我的项目中还用到了jquery.ztree.excheck-3.x.js，这个包的作用是提供单选复选框功能，还有一个包是编辑功能包  jquery.ztree.exedit-3.x.js 。因为项目比较简单不包含编辑功能所以没有用到。

  下面通过项目中的一个小的权限管理来阐述一下具体实现。项目中的实际图形为

要创建ztree，必须创建ztree的初始化方法，当页面加载时，js首先执行ztree的$.fn.ztree.init(Obj,zSetting,zNodes)方法，我们看到，这个初始化方法有三个参数，先搞懂这三个参数是干嘛的

Obj，这个是ztree的对象，API中说到，ztree对象提供了操作ztree的方法，通过js操作ztree必须使用此对象，那么这个对象如何得到，可用el表达式通过ztree的div的id直接得到该对象，即Obj=${"id"}。

zSetting 里面配置了各种参数，是ztree对象的数据配置。

zNodes则是后台传过来的数据。

下面通过简单的代码来说明如何创建ztree。

这里我就不上后端的代码了，通过后台传过来的数据格式是这样的：

String functionList=

[{"id":"11","pId":"11","name":"信息采集"},{"id":"5","pId":"5","name":"信息查询","checked":true},{"id":"12","pId":"11","name":"村居信息采集"},{"id":"6","pId":"5","name":"村居信息查询","checked":true},{"id":"32","pId":"31","name":"用户管理"},{"id":"26","pId":"26","name":"统计分析"},{"id":"13","pId":"11","name":"农户信息采集"},{"id":"7","pId":"5","name":"农户信息查询","checked":true},{"id":"28","pId":"26","name":"村居信息统计"},{"id":"33","pId":"31","name":"角色管理"},{"id":"31","pId":"31","name":"平台管理"},{"id":"34","pId":"31","name":"权限管理"},{"id":"35","pId":"31","name":"单位管理"},{"id":"30","pId":"26","name":"农户家庭基本信息统计"},{"id":"29","pId":"26","name":"农户家庭成员信息统计"},{"id":"27","pId":"26","name":"农户家庭教育信息统计"},{"id":"37","pId":"31","name":"数据字典"},{"id":"38","pId":"26","name":"需求情况信息统计"},{"id":"40","pId":"26","name":"农户医疗情况统计"},{"id":"39","pId":"26","name":"农户水住行情况统计"}]

这是一个json类型的数组，ztree是使用json数据

前台js代码

   $(function(){
         var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true,
                    /* idKey : "id",
                    pIdKey :"pId",
                    rootPid :null */
                    
                }
            }
            
        };

        var zNodes =${functionList};
        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
        })
    
    </SCRIPT>     
                <div class="treeClass" >
                <ul id="treeDemo" class="ztree" ></ul>
               </div>

check的设置是是否显示单选框/复选框，setting里面的参数很多，全部记得的话很难，需要用到的时候直接看下API，API都有详细的说明。

之前看API的时候，看到setting里的参数data中的simpleData属性，里面有句话是这样说的：

true / false 分别表示 使用 / 不使用 简单数据模式

如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系。

我看了下它们的注释，idkey，节点数据中保存唯一标志的属性名称，当setting.data.simpleData.enable = true 时生效，默认值是“id”

                           PIdKey，节点数据中保存父节点的的唯一标志的属性名称，当setting.data.simpleData.enable = true 时生效，默认值是“PId”

我们看到，这两个参数都有默认值，所以，在后台传过来的参数名称必须与默认值保持一致，也就是上面的functionList中的数据形式，其实在setting.data.simpleData中是不必设置这几个参数的，只要传过来的参数名称与默认值保持一致就行了，当然，我们也可以自己命名参数的名称，但是就需要在setting.data.simpleData里面显示的设置一下。说到底还是idKey和pIdKey的参数名称前后台保持一致就行了。

 

当然这个是最简单的树形结构了，ztree还有很多功能，灵活多变，本次就先学习的这里，新手初学，可能会有一些理解不到位或者错误的地方，如果有朋友看到这篇文章发现有错误的地方欢迎指出，谢谢了。