zTree的使用

介绍

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

树结构

图总结：

1. 所有的节点均有父节点（除了根节点）
2. 根节点往往是一个虚拟的、不存在的节点，但是我们可以直接使用
3. 最末端的节点称为叶子节点
4. 不是所有的节点都有子节点，比如叶子节点
5. 存在特殊的树结构，比如二叉树结构。二叉树的一个节点最多只能有2个子节点。

快速使用

前提：网上下载zTree树形插件的压缩包

第一：引入要使用的ztree的js和css文件

<!--引入ztree相关css和js文件-->
    <link rel="stylesheet" href="static/lib/zTree/css/icomoon_styles.css" type="text/css">
    <link rel="stylesheet" href="static/lib/zTree/css/metroStyle.css" type="text/css">
    <%--zTree的jquery--%>
    <script type="text/javascript" src="static/lib/zTree/js/jquery-1.4.4.min.js"></script>
    <%--zTree的核心（基础）功能--%>
    <script type="text/javascript" src="static/lib/zTree/js/jquery.ztree.core.js"></script>
    <%--zTree的复选框功能--%>
    <script type="text/javascript" src="static/lib/zTree/js/jquery.ztree.excheck.js"></script>
    <%--zTree的编辑功能--%>
    <script type="text/javascript" src="static/lib/zTree/js/jquery.ztree.exedit.js"></script>

第二：创建一个ul标签来装zTree树形权限

<ul id="test1" class="ztree"></ul>

第三：在JS中设置zTree相关内容（这里使用Ajax和setting配置）

标记: 注：除了setting配置还有其他的简单配置

//加载权限树形组件
    function zTreeAuthorityLoad(dataUrl) {
        var setting={
            check: {
                enable: true,   //是否开启复选框
                chkStyle: "checkbox"    //显示 checkbox 选择框，默认checkbox可选择值radio
            },
            async: {
                enable: true,   //要开启async功能必须设置为true,其他地方同理
                dataType: "json",   //返回的数据类型
                type: "get",    //提交的请求方式
                url: dataUrl,   //服务器端访问路径
                autoParam:["id", "name=n", "level=lv"],  //使用异步加载的默认配置
                otherParam:{"otherParam":"zTreeAsyncTest"}  //Ajax 请求提交的静态参数键值对
            },
            data: {
                simpleData: {
                    enable: true,   //使用格式化后的数据
                    idKey: "id",    //节点id名
                    pIdKey: "parent",   //父节点id名
                    rootPId: 0  //默认根节点为0
                }
                ,key : {
                    name : "authorityName" // 结点显示的name属test1性，节点的名称，对应到Json中的authorityName
                }
            }
        };
        //树形结构的数据初始化
        var city = $.fn.zTree.init($("#test1"),setting);
    }

	//1、加载树形组件(携带角色id参数)
    zTreeAuthorityLoad("/authority/selAuthorityByParam?roleId="+data.id)

setting模式：此种方式最重要的在 { idKey: “id”, //节点id名 pIdKey: “parent”, //父节点id名 }两个属性，
idKey 代表了当前结点的id，
pIdKey 代表了当前节点的 “父节点”id

例如：
假若
 数学书节点（idKey=1,pIdKey=0）
   离散数学节点（idKey=11,pIdKey=1）
   高等数学节点（idKey=22,pIdKey=1）
 生物书节点（idKey=2,pIdKey=0）
   动物身体构造原理（idKey=33,pIdKey=2）

更多详细资料请前往：http://www.360doc.com/content/19/0523/11/19913882_837657547.shtml