首页 > 代码库 > ztree学习笔记(一)

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还有很多功能,灵活多变,本次就先学习的这里,新手初学,可能会有一些理解不到位或者错误的地方,如果有朋友看到这篇文章发现有错误的地方欢迎指出,谢谢了。

 

ztree学习笔记(一)