ztree异步加载

编程技术  /  houtizong 发布于 3年前   186

相信新手用ztree的时候,对异步加载会有些困惑，我开始的时候也是看了API花了些时间才搞定了异步加载，在这里分享给大家。
我后台代码生成的是json格式的数据，数据大家按各自的需求生成，这里只给出前端的代码。

设置setting，这里只关注async属性的配置

            var setting = {            //异步加载配置            async: {                    enable: true,                    url: top.basePath + '/pages/system/buildColumnTreeNodes.action?isAsynchronized=isAsynchronized',                    autoParam: ["objId"],                        dataType: "json",                        dataFilter: filter            },            data: {                simpleData: {                    enable: true                }            },            callback:{               onClick:onClick            }        };

1、初始化数据

            //展示初始化树数据            function showTree(){            jQuery.ajax({                    type:'GET',                    url:top.basePath + '/pages/system/buildColumnTreeNodes.action',                    dataType:'json',                    success:function(data){                        var zNodes = data.model;                        $.each(zNodes,function(key, val){                        if(val.haveNext)                        {                           val.isParent = true;//isParent属性设置为true，才能作为父节点异步加载下一节点！                        }                            if(val.level == 0)                            {                                val.open = true;                                val.icon = '<%=path%>/plugins/ztree/css/zTreeStyle/img/diy/1_close.png';                            }else{                            val.icon = '<%=path%>/plugins/ztree/css/zTreeStyle/img/diy/1_open.png';                            }                        });                        var zTreeObj  = $.fn.zTree.init($("#columnTree"), setting, zNodes);                    }                });            }

2、异步加载数据

每次点击父节点前的加号就会执行async属性中的url:top.basePath + '/pages/system/buildColumnTreeNodes.action?isAsynchronized=isAsynchronized'请求后台获取数据

3、过滤数据

            //处理异步加载后返回的数据            function filter(treeId, parentNode, responseData){            var zNodes = responseData.model;            $.each(zNodes,function(key, val){                    if(val.haveNext)                    {                       val.isParent = true;//isParent属性设置为true，才能作为父类节点异步加载下一节点！                    }                    if(val.level == 0)                    {                        val.open = true;                        val.icon = '<%=path%>/plugins/ztree/css/zTreeStyle/img/diy/1_close.png';                    }else{                        val.icon = '<%=path%>/plugins/ztree/css/zTreeStyle/img/diy/1_open.png';                    }                });            return zNodes;            }

• 代码中出现的一些属性是我根据自己的需要而设置的，大家只要了解异步加载的步骤和基本配置就可以了。