zTree 学习笔记之(一)

简介

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

到底有哪些具体的优点，可以参见官网http://www.treejs.cn/v3/main.php#_zTreeInfo

文件准备

1、下载JQuery 文件包，下载地址：http://jquery.com/

2、下载JQuery zTree v3.0.zip（或更高的版本） ,下载地址：https://github.com/zTree/zTree_v3

将需要使用的 zTree v3.x 相关的js、css、img文件分别放置到相应目录，并且在HTML文件中引用时保证相对路径正确。

同时可以引用jquery.min.js bootstrap.min.js bootstrap.min.css最后一个是可选的，一般是结合bootstrap使用的，可以使得界面比较美观。

开始上路

1、第一次按照以下代码，制作HTML页面。

1) "<!DOCTYPE html>" 是必需的！
2) zTree 的容器 className
只能设置为 "ztree"，不能更改(可以更改，但是同时zTreeStyle.css内的ztree名字也要相应的更改，必须保持一致)，即class = “ztree”。
3) 入门成功后，就可以按照顺序去看 Demo 了，直接看看源码。

2、
根据官网入门的HTML：以下是自己边学边查写的静态页面代码。

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>zTree 学习案例</title>

    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.css" />

    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css">

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <script type="text/javascript" src="js/jquery.ztree.core.min.js"></script>

    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <script language="JavaScript" type="text/javascript">

    var setting = {

        view: {

            dblClickExpand: false,    //双击节点时，是否自动展开父节点的标识

            expandSpeed: 10 //设置树展开的动画速度 三种预定速度之一的字符串("slow", "normal", "fast"),也可以是 表示动画时长的毫秒数值 (如：1000)

        },

        data:{ // 必须使用data,这是setting格式要求

            simpleData : {

                enable : true, //确定 zTree 初始化时的各种数据是否采用简单数据模式 (Array)

                idKey : "id", //id编号命名，节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]

                pIdKey : "pId", //父id编号命名，节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]

                rootPId : 0

            }

        },

        // 回调函数

        callback : {  //callback 里面注册有各种回调函数，用来处理不同的事件。例如下面三例子

            onClick : function(event, treeId, treeNode, clickFlag) {  //用于捕获节点被点击的事件回调函数

                var zTree = $.fn.zTree.getZTreeObj("tree");    //zTree v3.x 专门提供的根据 treeId 获取 zTree 对象的方法

                zTree.expandNode(treeNode);

            },

            onAsyncSuccess : function(event, treeId, treeNode, msg){  //用于捕获异步加载正常结束的事件回调函数

            },

            onAsyncError : function(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown){ //用于捕获异步加载出现异常错误的事件回调函数

            }

        }

    };

    var zNodes = [

        {name:"test1", open:true, children:

                [{name:"test1_1",children:

                        [{name:"test232_1"}, {name:"test232_2"}]},

                {name:"test1_2"}]},

        {name:"test2", open:true, children:

                [{name:"test2_1"}, {name:"test2_2"}]}

    ];

    $(document).ready(function() {

        zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);

    });

</script>

</head>

<body>

　　<div>

    　　  <!—这里的 ul 的class名字一定要是ztree,不能更改-->

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

    </div>

</body>

</html>

注记：var setting是zTree配置项，。里面包括async(主要用于异步加载数据时配置，比如url，type等)；callback(内部注册有各种回调函数，用来处理不同的事件)；check(主要用于设置节点前面是否有复选框)；data(主要用于设置数据的显示的格式)；edit(主要用于设置树节点编辑时的各参数，如enable:设置 zTree 是否处于编辑状态)；view(主要用于设置界面显示动画各参数，比如expandSpeed:用于设置节点展开、折叠时的动画速度)

$(document).ready(function() {

        zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);

});

zTree 初始化方法，创建 zTree 必须使用此方法

1、需要首先加载 jquery-1.4.2.js 或其他更高版本的 jQuery 。

2、需要加载 jquery-ztree.core-3.0.js，如果需要用到 编辑功能 或 checkbox / radio 还需要分别加载 jquery-ztree.exedit-3.0.js 和 jquery-ztree.excheck-3.0.js 。

3、需要加载 zTreeStyle.css 以及 zTreeStyle 目录下的 img 文件。

5、注意设置 zTree 的容器样式 class="ztree"，其中 "ztree" 这个 className，可以根据需要随意修改，别忘了修改 css 中对应名字就是，对于容器如果需要增加其他特殊样式，可根据自己的需要进行修改。

参数说明：$.fn.zTree.init($("#tree"), setting, zNodes)

Obj  (jQuery Object)     用于展现 zTree 的 DOM 容器

zSetting (JSON)    zTree 的配置数据，具体设置“setting 配置详解”中的各个属性说明

zNodes   Array(JSON) / JSON

zTree 的节点数据，具体参考 “treeNode 节点数据详解”中的各个属性说明

1、v3.x 支持单独添加一个节点，即如果只新增一个节点，不用必须包在数组中

2、如果需要异步加载根节点，可以设置为 null 或 [ ]

3、使用简单数据模式，参考 setting.data.simpleData 内的属性说明

返回值JSON

zTree 对象，提供操作 zTree 的各种方法，对于通过 js 操作 zTree 来说必须通过此对象

如果不需要自行设定全局变量保存，可以利用 $.fn.zTree.getZTreeObj方法随时获取zTree 对象

显示结果