zTree使用

zTree使用

使用zTree动态加载大量数据：

• 参考官方API
• 官方Demo
• 关键逻辑

---

参考官方API

官方API地址 —— [ zTreeAPI]

主要包括setting 配置详解、zTree 方法详解。

参考官方Demo

官方Demo地址 —— [ zTreeDemo]

分批异步加载大数据量
此 Demo 专门用于测试分批异步加载，每次展开节点都要重新进行异步加载。

1、大数据量加载说明
    1)、对于某一级节点数多达几千个的时候，zTree 默认的延迟加载是无效的，此 Demo 演示了一种原先 zTree v2.6 时的分批加载节点的方法。
    2)、此方法适用于1、2千个节点必须全部显示的需求。
    3)、此方法并不能解决加载慢的问题，相反只会让最终结果出现的更慢，只是可以有限度的避免浏览器假死，而且显示的节点越多就越慢。
    4)、对于某一级节点数至少几千个的情况，另一个解决方案是：分页异步加载。
    async load log:
        [ 10:23:35 105 ]  treeNode:2000个节点
        加载完毕，共进行 20 次异步加载, 耗时：4.738 秒
        [ 10:23:41 366 ]  treeNode:1000个节点
        加载完毕，共进行 10 次异步加载, 耗时：1.792 秒
2、setting 配置信息说明
    需要设置 setting.async 异步加载部分的参数
    建议关闭动画效果 setting.view.expandSpeed = "";
    其他不需要进行特殊的配置，根据自己的需求自行设置
3、treeNode 节点数据说明
    对 节点数据 没有特殊要求，用户可以根据自己的需求添加自定义属性

关键逻辑

配置　：

var setting = {
        async: {              /*异步操作相关*/
            enable: true,
            url: getUrl      /*异步获取数据所用地址*/
        },
        check: {             /*关联操作相关*/
            enable: false    /*设置zTree的节点上是否显示 checkbox/radio 默认值: false*/
        },
        data: {
            simpleData: {
                enable: true /*是否启用简单数据模式*/
            }
        },
        view: {
            expandSpeed: ""
        },
        callback: {    /*各个事件相关，处理代码逻辑*/
            beforeExpand: beforeExpand,
            onAsyncSuccess: onAsyncSuccess,
            onAsyncError: onAsyncError,
            onClick: zTreeOnClick
        }
    };

数据初始化　：

 /**
    * 页面初始化
    */
    $(document).ready(function () {
        onLoadZTree();
    });

    /**
    * 加载树形结构数据
    */
    function onLoadZTree() {
        var treeNodes;
        $.ajax({
            async: false, //是否异步
            cache: false, //是否使用缓存
            type: 'POST', //请求方式：post
            dataType: 'json', //数据传输格式：json
            url: "", //请求的action路径
            error: function () {
                //请求失败处理函数
                alert('亲，请求失败！');
            },
            success: function (data) {
                //请求成功后处理函数
                treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes
            }
        });
        var t = $("#tree");
        t = $.fn.zTree.init(t, setting, treeNodes);
        //调用默认展开第一个结点  
        var nodes = t.getNodes();
        t.expandNode(nodes[0], true);
    }