zTree -- jQuery 树插件 构造treeNode JSON 数据对象

前言

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。

网址：http://www.ztree.me/v3/main.p...

上回说到，在大型项目中，往往需要不同的用户看到不同的目录，不同的地区显示不同的目录等等，面对这些庞大的数据，需要生成不同结构的树目录，你不能一个一个定义这些配置来满足那么多数据需求，这就需要异步加载子节点的的父节点，通过构造treeNode的 JSON 数据对象方法来实现，如果你不嫌我啰嗦，接下来会给大家讲述这个方法。

setting配置

按照如下配置来构造ztree:

//树初始化
var myTreeSetting = {
    view: {  
        showLine: true, 
        selectedMulti: false,  
        dblClickExpand: false  
    },  
    async: {
        enable: true,
        type: "get",
        dataType:"json",
        url:"/server/basic/major/info/findmajortree.json",
        autoParam:["id=pId"],
        dataFilter: filter
    },

    data: {  
        simpleData: {  
            enable: true,  
            idKey:"id",  
            pIdKey:"pId",
            rootPId:0
        }
    }
};

解释：

1. setting.async.url [ 依赖 jquery.ztree.core ]
   Ajax 获取数据的 URL 地址，默认值："".设置固定的异步加载 url请注意地址的路径，确保页面能正常加载。
   url 内也可以带参数，这些参数就只能是通过 get方式提交了，并且请注意进行data格式。不同的树目录根据不 同的数据，在服务器端编写好不同的url，将其配置在这里即可。
2. setting.async.dataType[ 依赖 jquery.ztree.core]
   Ajax 获取的数据类型，默认值："text"。这里我使用了json。
3. setting.async.dataFilter[ 依赖 jquery.ztree.core ]
   用于对 Ajax 返回数据进行预处理的函数。之后代码中会给出filter的定义。

详细说明参见：zTree API 文档 http://www.ztree.me/v3/api.php

代码

html：
还是zTree -- jQuery 树插件 使用方法与例子中的那个html，不在重复粘贴, 。

js:

    var treeNodes;  

     $(document).ready(function() {
          initTree($('#planTree'));
      });
  
    //树初始化
    var myTreeSetting = {
        view: {  
            showLine: true, 
            selectedMulti: false,  
            dblClickExpand: false  
        },  
        async: {
            enable: true,
            type: "get",
            dataType:"json",
            url:"/server/basic/major/info/findmajortree.json",
            autoParam:["id=pId"],
            dataFilter: filter
        },
    
        data: {  
            simpleData: {  
                enable: true,  
                idKey:"id",  
                pIdKey:"pId",
                rootPId:0
            }
        }
    };
    
    
    //初始化树，包括回调函数
    function initTree(anchor){
        //初始化节点                           
        treeNodes = $.fn.zTree.init(anchor, classTreeSetting);
    }
    
    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i=0, l=childNodes.length; i<l; i++) {
            if (childNodes[i].pId!='0') childNodes[i].open = false;
        }
    
        curChildNodes = childNodes;
        return childNodes;
    }

如此，就可以实现了。
任它数据再多，树结构再复杂，这一个js就足以配置许多想要的书目录了。
效果如下：

后记

在页面上放这样一个树目录当然不是为了放在那里观看的，例如，你想要点击树中的某个节点，页面上的列表数据刷新为对应的数据，等功能，都可以通过以下方法来完成。

在myTreeSetting中配置 callback，定义点击事件。

    callback: {
            beforeClick: getCurrentNode,
            onClick : zTreeOnClick
        }

在js中定义这些函数:

   function getCurrentNode(treeId, treeNode) {
       curNode = treeNode;
       zTreeOnClick(curNode);
   }
   
   function zTreeOnClick(treeNode){
      //此处编写需要完成的业务逻辑代码
   }

ztree相关系列文章

zTree -- jQuery 树插件 使用方法与例子
zTree -- jQuery 树插件 构造treeNode JSON 数据对象
zTree v3.5 Demo 演示 OutLook 样式的左侧菜单
VUE中使用 zTree -- jQuery 树插件 及 使用时报错 jQuery is not defined 的问题解决