ztree学习笔记（一）

    在项目当中，常常会用到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还有不少功能，灵活多变，本次就先学习的这里，新手初学，可能会有一些理解不到位或者错误的地方，若是有朋友看到这篇文章发现有错误的地方欢迎指出，谢谢了。