JQuery ztree 异步加载实例讲解

什么是ztree

ztree是基于JQuery封装的一款快速、简洁的前端Javascript树形插件。其具有简单易用、功能强大、兼容性好等特点，在众多的前端树形插件中有着广泛的应用。

ztree异步加载的目的

在处理较大数据集合时，直接获取全部数据即使是在客户端也会产生较大的冗余和访问压力。而ztree的异步加载机制能够通过缩减请求量来提高数据的加载效率和性能，尤其是在树形数据量较大时尤为明显。

实现ztree异步加载的步骤

ztree的异步加载通过ajax机制实现，以下是实现步骤：

第一步：配置ztree的基本参数

在ztree的初始化配置中，需要指定ztree的数据来源，即通过异步列表访问服务器的JSON格式的数据。示例代码如下：

var setting = {
    async: {
        enable: true,
        url: "treeData.json",
        autoParam: ["id"],
    },
    …
};

其中：

• enable 该参数设为true表示开启异步请求数据模式

• url 表示异步请求获取数据的服务器端地址

• autoParam 参数是与异步获取数据相关的参数，这里指定异步请求所带的参数是节点的id属性值

第二步：异步请求类的处理

在ZTree参数的 setting.async 对象中，还有一些具体的异步请求相关的配置参数：

• dataFilter设置异步获取的数据处理函数。其功效可以让你自行随意处理从后台返回来的数据或调整数据的格式等

• type同JQuery.ajax的type，用于设置post或者get方式请求数据

• contentType设置Ajax传递的数据格式，目前常用最多的是："application/json"，则会POST一个 JSON 串。

示例代码如下：

var setting = {
    async: {
        enable: true,
        url: "treeData.json",
        autoParam: ["id"],
        type: "get",
        dataType: "json",
        contentType: "application/json",
        dataFilter: function (treeId, parentNode, responseData) {
            return responseData;
        }
    },
    … 
};

第三步：处理节点数据的值

在异步获取回调函数中，可以针对后台节点返回Data数据对其中的数据进行处理以满足前端的显示需求,如处理节点替换、处理为新的 JSON 数据等。详见示例代码：

var zTree;
$(document).ready(function(){
    var setting = {
        async: {
            enable: true,
            url: "asyncSample.json",
            autoParam: ["id"],
            dataFilter: filter
        }
    };

    // 处理Ajax返回的Node数据中的name属性
    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i=0, l=childNodes.length; i<l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }

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

示例

示例1：简单异步加载树形菜单

这里的后台数据源是一份JSON数据或静态数据，其完整的获取过程以Ajax异步请求方式实现。当点击树形导航栏时，会触发Ajax加载当前节点的子节点数据。示例详见：http://www.treejs.cn/v3/demo.php#_101

示例2：基于JAVA后台获取异步加载的树形数据

基于JAVA开发的树形菜单，对于数据节点的处理方案可能稍有不同。但其结构和操作方式与示例1是类似的，细节具体请参见Demo说明：http://www.treejs.cn/v3/demo.php#_100

参考文献

• http://www.treejs.cn/

• http://www.igoogle-soft.com/ztree/594.html

• http://www.cnblogs.com/drdj/p/3465760.html