Jquery zTree 使用说明

1.导入所需的文件

<script type="text/javascript" src="vendor/jquery/jquery-1.12.4.js"></script>
<link type="text/css" href="vendor/zTree/zTreeStyle.css" rel="stylesheet"/>
<script type="text/javascript" src="vendor/zTree/jquery.ztree.all.min.js"></script>

2.建立HTML标签进行标记

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

3.在JavaScript中进行配置和初始化

var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {
    callback: {
        beforeClick: beforeClick,
        onClick: treeNodeClick
    }
};
// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
var zNodes = [
    {name: "学习", open: true, children: [
         {
             name: "jQuery", 
             src: "http://www.jquery.com"
         },{
             name: "cnblogs", 
             src: "http://www.cnblogs.com"
         }]},
    {name: "购物", open: false, children: [
            {
             name: "淘宝", 
             src: "http://www.taobao.com"
         },{
             name: "当当", 
             src: "http://www.dangdang.com"
         }]}
];
// zTree 的函数编写 点击前的事件，点击发生事件
function beforeClick(treeId, treeNode, clickFlag) {
    alert(treeNode.src);//treeNode 就是所点击节点的详细信息
}
function treeNodeClick(event, treeId, treeNode, clickFlag) {
    alert(treeNode.src);//再此填写点击事件，可以通过不同的参数区分不同事件
}
$(document).ready(function() {
    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});