jquery zTree异步加载简单实例分享

首先，让我们来了解一下什么是 jQuery zTree 以及异步加载。

jQuery zTree 是什么？

jQuery zTree 是一款基于 jQuery 的树形视图插件，它具有结构清晰、功能强大和使用简便的特点。它可以帮助我们轻松实现一个树形结构的网页，比如分类列表、目录树、导航菜单等等。

异步加载是什么？

当我们需要渲染的树形结构数据较大时，如果一次性加载所有数据将会对页面性能产生较大的影响。此时，我们可以使用异步加载的方式，将数据分批加载，并在用户需要时再加载。

接下来，我们将使用 jQuery zTree 来实现一份树形结构，并使用异步加载来加载节点。

实现步骤

1. 引入必要的资源文件

<!--必要的 CSS 文件-->
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">

<!--必要的 JS 文件-->
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.exedit.min.js"></script>

1. 编写 HTML 代码

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

1. 编写 JavaScript 代码

// 定义 zTree 的参数配置
var setting = {
    async: {
        enable: true, // 开启异步加载

        // 异步加载数据接口
        url: "data/getNodes",

        // 异步加载时请求参数的参数名
        otherParam: {
            "otherParam": "zTreeAsyncTest"
        }
    },

    // 点击节点的回调函数
    callback: {
        onClick: function(event, treeId, treeNode, clickFlag) {
            // 异步加载该节点子节点
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.reAsyncChildNodes(treeNode, "refresh", true);
        }
    }
};

// 定义树形结构的数据
var zNodes = [
    {name:"父节点 1", open:true, children: [
        {name:"子节点 1"},
        {name:"子节点 2"}
    ]},
    {name:"父节点 2", open:true, children: [
        {name:"子节点 3"},
        {name:"子节点 4"}
    ]}
];

// 初始化 zTree
$.fn.zTree.init($("#treeDemo"), setting, zNodes);

1. 编写服务器端代码

在异步加载数据接口中，我们需要返回一个 JSON 格式的数据，该数据包含了要加载的节点的信息，格式如下：

[
    {id:1, pId:0, name:"父节点 1", isParent:true},
    {id:2, pId:1, name:"子节点 1", isParent:false},
    {id:3, pId:1, name:"子节点 2", isParent:false},
    {id:4, pId:0, name:"父节点 2", isParent:true},
    {id:5, pId:4, name:"子节点 3", isParent:false},
    {id:6, pId:4, name:"子节点 4", isParent:false}
]

其中，id 为节点 ID；pId 为节点父节点的 ID；name 为节点名称；isParent 表示该节点是否是父节点。

示例1：静态树形结构

接下来，我们演示一下如何使用 jQuery zTree 来创建静态的树形结构。

我们在页面中新建一个 div，加上 ID 属性和 CSS 样式，用来容纳 zTree：

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

然后，在 JavaScript 中定义树形结构数据：

var zNodes = [
    { name:"父节点 1", open:true, children:[
        { name:"子节点 1" },
        { name:"子节点 2" }
    ]},
    { name:"父节点 2", open:true, children:[
        { name:"子节点 3" },
        { name:"子节点 4" }
    ]}
];

接下来，我们调用 jQuery zTree 的初始化方法，来渲染树形结构：

$.fn.zTree.init($("#treeDemo"), setting, zNodes);

现在，我们可以在页面中看到了一个树形结构。

示例2：使用 AJAX 加载节点

在实际开发中，我们经常需要从后端加载节点数据。这时，我们可以使用 jQuery 的 AJAX 方法来请求服务器端，获取 JSON 格式的数据，并将其作为树形结构的数据。

在 HTML 中，我们使用与前一个示例相同的方式来容纳 zTree。

然后，在 JavaScript 中，我们使用 AJAX 来请求获取数据：

$.ajax({
    type: "POST",
    url: "data/getNodes",
    dataType:"json",
    success: function(data){
        $.fn.zTree.init($("#treeDemo"), setting, data);
    }
});

这里的 url 参数指定了 AJAX 请求的接口地址，success 参数指定了请求成功后的回调函数，data 参数则是从服务器端返回的 JSON 格式的数据。在回调函数中，我们使用 zTree 的初始化方法来渲染树形结构。