ztree.js构型树插件基于Java后台的异步加载问题

最近在项目中用到了ztree.js这个构型树插件，因为我们公司使用的是Java开发后台，在插件的异步加载上和官方文档有些差异，所以自己总结了一下使用经验。

一、ztree.js简介

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree 是开源免费的软件（MIT 许可证）。

• zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
• 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
• 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
• 支持 JSON 数据
• 支持静态 和 Ajax 异步加载节点数据
• 支持任意更换皮肤 / 自定义图标（依靠css）
• 支持极其灵活的 checkbox 或 radio 选择功能
• 提供多种事件响应回调
• 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
• 在一个页面内可同时生成多个 Tree 实例
• 简单的参数配置实现 灵活多变的功能
  详见官网：http://www.treejs.cn/v3/main.php#_zTreeInfo

二、ztree.js简单实例

ztree.js在使用上需要设置三部分内容。第一部分是setting即配置，第二部分是提供json数据，第三部分是初始化。

1、setting的配置。官方API中给出的有6部分内容，分别是async、callback、check、data、edit和view。顾名思义，async就是异步的配置，callback即返回函数，以此类推。但是通常并不是都需要设置，具体要看使用情况，甚至可以为空。例如下面这段简单的setting配置：

var setting = {
        data: {
            simpleData: {
                enable: true
            }
        }
    };

2、json数据，符合数据格式要求即可。例如：

var zNodes =[
        { id:1, pId:0, name:"父节点1 - 展开", open:true},
        { id:11, pId:1, name:"父节点11 - 折叠"},
        { id:111, pId:11, name:"叶子节点111"},
        { id:112, pId:11, name:"叶子节点112"},
        { id:113, pId:11, name:"叶子节点113"},
        { id:114, pId:11, name:"叶子节点114"},
        { id:12, pId:1, name:"父节点12 - 折叠"},
        { id:121, pId:12, name:"叶子节点121"},
        { id:122, pId:12, name:"叶子节点122"},
        { id:123, pId:12, name:"叶子节点123"},
        { id:124, pId:12, name:"叶子节点124"},
        { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
        { id:2, pId:0, name:"父节点2 - 折叠"},
        { id:21, pId:2, name:"父节点21 - 展开", open:true},
        { id:211, pId:21, name:"叶子节点211"},
        { id:212, pId:21, name:"叶子节点212"},
        { id:213, pId:21, name:"叶子节点213"},
        { id:214, pId:21, name:"叶子节点214"},
        { id:22, pId:2, name:"父节点22 - 折叠"},
        { id:221, pId:22, name:"叶子节点221"},
        { id:222, pId:22, name:"叶子节点222"},
        { id:223, pId:22, name:"叶子节点223"},
        { id:224, pId:22, name:"叶子节点224"},
        { id:23, pId:2, name:"父节点23 - 折叠"},
        { id:231, pId:23, name:"叶子节点231"},
        { id:232, pId:23, name:"叶子节点232"},
        { id:233, pId:23, name:"叶子节点233"},
        { id:234, pId:23, name:"叶子节点234"},
        { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
    ];

3、初始化。初始化基本格式如下：

$(document).ready(function(){
    // 提供三项内容：1、jQuery对象，2、配置项，3、json数据
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

三、ztree.js的异步加载

1、基础案例

// 配置
var setting = {
    async: {
        enable: true,
        url:"../asyncData/getNodes.php",
        autoParam:["id", "name=n", "level=lv"],
        otherParam:{"otherParam":"zTreeAsyncTest"},
        dataFilter: filter
    }
};
// 数据预处理
function filter(treeId, parentNode, childNodes) {
    if (!childNodes) return null;
    for (var i=0, l=childNodes.length; i

注：配置选项中的otherParam是 Ajax 请求提交的静态参数键值对，可以向后台接口传递参数，好比jQuery里面Ajax()方法中的Data参数；dataFilter是用于对 Ajax 返回数据 进行预处理 的函数，就是异步加载完成，对数据进行二次加工的方法。以上两种方法都是在[setting.async.enable = true 时生效]（废话）。

2、实际情况
在项目开发的时候，我们后台使用的是Java语言，返回的是json数据。这时候一种情况是可以直接在url中调用后台接口（Java中通常为web.xml文件配置的接口，或者是spring配置的接口），用otherParam向后台接口提交多个request参数。otherParam提交参数有数组和JSON对象两种格式，JSON格式如：{ "id":"1", "name":"test"}）。（墙裂推荐使用直接调用Java后台方法的这种方式）

还有一种变通的方法就是将url设置为一个空的方法，然后在对数据进行预处理 的时候在dataFileter中添加具体的异步方法。这两种方法都可以实现向后台发起异步请求，后一种方法只需要写一个异步的函数体，然后在dataFilter中调用即可，这种方法比较直观，但并不是好的方法，因为插件已经提供了上边提及的异步方法。

var treeObjNew, prefex;
var getSysTreeSetting = {
        async: {
            autoParam:["id"],
            enable: true,
            otherParam:{"id":"0"},
            url: getUrl, // 设置一个空方法，但值不能为空。
            dataFilter: filter
        },
        data: {
            key: {
                name:"name"
            },
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "parentId"
            }
            },
        view: {
        },
        callback: {
            beforeClick: filter,
            onClick: function (event, treeId, treeNode, clickFlag) {
                              // 注：参数含义详见官网API
            } 
        },
    };

function getUrl(){};

function filter(treeId, treeNode, responseData)){
       // 根据DOMId获取ztree内部对象
       var treeObj = $.fn.zTree.getZTreeObj("tree");
       ***省略异步请求***
       // 仅为示例，只做参考
       $.ajax({
          url:"***",
          .
          .
          .
          success:function(data){
              console.log(data);
              responseData = data;
              return responseData;
           }
       });
}

值得注意的是，ztree.js在setting里面添加方法的时候，都包含有两个隐藏参数，即treeId和treeNode。也就是说类似于dataFilter:filter这个配置，dataFilter会传这两个参数给filter方法，不需要另行设置，同时filter还会包含一个responseData的默认参数，它是Ajax完成后返回的JSON数据，使用这个参数就可以对返回数据进行二次加工。详见官网API。