zTree树状控件--使用基础

简介:

　　zTree控件是一个依赖于JQuery框架的一个轻量级树状结构显示控件.全称JQuery zTree.

优点:

•  兼容 IE、FireFox、Chrome 等浏览器
•  在一个页面内可同时生成多个 Tree 实例
•  支持 JSON 数据
•  支持一次性静态生成 和 Ajax 异步加载 两种方式
•  支持多种事件响应及反馈
•  支持 Tree 的节点移动、编辑、删除
•  支持任意更换皮肤 / 个性化图标（依靠css）
•  支持极其灵活的 checkbox 或 radio 选择功能
•  简单的参数配置实现 灵活多变的功能
•  控件开源且有很多现成样式

使用:　　

1. 使用zTree需要引入它的依赖文件,分别是JQuery的js文件,zTree的js文件和css文件.
2. 在引入zTree的依赖文件后,就可以在页面使用zTree了.

代码示例:

1 <div id="zTreeId" class="zTree"><!--这个div用于显示zTree树状结构--></div>

　　第一步:在页面中定义一个div,用于加载zTree树.注意:这个控件的class一定要指定为zTree(在zTree的css文件中定义的).

1 $(document).ready(function(){
2     //在页面静态资源加载完后,去加载zTree树  
3     var treeObj = $.fn.zTree.init($("#zTreeId"), setting);
4 });

　　第二步:在页面静态资源加载完后,运行zTree的核心函数init.函数中的两个参数分别指需要加载zTree控件的页面组件和setting配置信息(包括数据源,树结构的属性等).这个函数还可以传入第三个值,第三个值是一个方法,即加载完的回调函数.

var setting = {
        async : {
            //设置 zTree 是否开启异步加载模式,默认值为false
            enable : true,
            //仅在enable为ture时有效,用于指定数据加载的地址
            url : "XXX.com"+ location.search,
            //异步加载时需要自动提交父节点属性的参数。
            autoParam : [ "id" ],
            //文件过滤器,参数值是一个函数,用于对 Ajax 返回数据进行预处理的函数。
            dataFilter : filter
        },
        view:{
            //双击节点时，是否自动展开父节点的标识
            dblClickExpand: true,
            //是否显示节点之间的连线
            showLine: true
        },
        callback : {
            //用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
            beforeExpand: beforeExpand,
            //用于捕获异步加载正常结束的事件回调函数
            onAsyncSuccess:pageInit
        },
        data:{
            simpleData: {  
               //确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array).就是使用简单数据格式,默认值false
            　　enable: true  
            }
        }
    };                                    

　　第三步:定义setting参数,用于构建树.setting的数据源有两种加载方式,动态加载和静态加载.上面写的是动态加载(静态加载是将数据定义成一个JQuery对象,在传入到init方法中:$("#zTreeId").zTree($("#zTreeId"),setting, treeNodes);

var treeNodes = [
    //id:生成的菜单项的id属性,isParent:用于表示这个菜单项是否为目录,name:用于显示这个菜单项的名称,open:用于指定这个目录是否默认打开
    {"id":1, "pId":0, "isParent":"true","open":"true","name":"test1"},   
    {"id":11, "pId":1, "name":"test11"},   
    //pId:用于指定这个菜单项的父目录,click用于指定这个菜单项的单击回调函数,url:用于打开一个url(这个打开是新页面打开)
    {"id":12, "pId":1,"click":"XXX","url":"XXX.com","name":"test12"},   
    {"id":111, "pId":11, "name":"test111"},   
]; 

注意事项:

　　常用函数:

    //获取一个zTree树对象,使用id获取,但不用写#.
    var treeOb = $.fn.zTree.getzTreeObj("zTree");
    //获取目录的子节点,返回值是一个数组
    treeOb.getNodes();
    //打开目录,treeOb是整个zTree对象,nodes是需要打开的目录
    treeOb.expandNode(nodes);
    //获取目录的子节点,等价于getNodes()
    nodes.children;

　　更多的配置信息和参数详解可以访问zTree的官方文档:http://www.treejs.cn/v3/api.php

转载于:https://www.cnblogs.com/CoderGuokai/p/7506392.html