码迷,mamicode.com
首页 > 其他好文 > 详细

ZTree异步加载树结构

时间:2018-05-31 16:44:56      阅读:1728      评论:0      收藏:0      [点我收藏+]

标签:node   var   syn   llb   提交   level   back   enable   key   

var setting = {
    async:{
        autoParam:["parentId"],      
        enable:true,     
        type:"post",      
        url:getUrl,    
        dataFilter:filter,    
    },    
    check : {    
        chkStyle: "radio",    
        enable: false,    
        chkboxType : { "Y" : "s", "N" : "ps" },    
        radioType : "level"    
    },    
    view: {    
        dblClickExpand: false,    
        addDiyDom:addDiyDom    
    },    
    data : {    
        key : {    
            name : "unitName"    
        },    
        simpleData : {
            enable : true,    
            idKey : "id",    
            pIdKey : "parentId",    
            rootPId : 0    
        }    
    },    
    callback : {
        beforeAsync : ztreeBeforeAsync,    
        onAsyncSuccess : ztreeOnAsyncSuccess,    
        onClick:ztreeOnAsyncSuccess    
    }    
};    

最关键的部分就是async参数设置上的部分还有callback中onAsyncSuccess的设置上

autoParam:异步加载时需要自动提交父节点属性的参数。

enable:true, 设置 zTree 是否开启异步加载模式

type:"post", Ajax 的 http 请求模式。

url:getUrl,Ajax 获取数据的 URL 地址。设置固定的异步加载 url 字符串(例子中是一个空方法。是在onAsyncSuccess中再加载,比较麻烦)

dataFilter:filter,用于对 Ajax 返回数据进行预处理的函数。

onAsyncSuccess:ztreeOnAsyncSuccess, 用于捕获异步加载正常结束的事件回调函数

function ztreeOnAsyncSuccess(event, treeId, treeNode){    
    var url = "unitAction!xzqhTree.action?parentId=";    
    if(treeNode == undefined){    
        url += "1";    
    }    
    else{    
        url += treeNode.id;    
    }    
    $.ajax({    
        type : "post",    
        url : url,    
        data : "",    
        dataType : "json",    
        async : true,    
        success : function(jsonData) {                  
            if (jsonData != null) {         
                var data = jsonData.unitList;    
                if(data != null && data.length != 0){    
                    if(treeNode == undefined){    
                        treeObj.addNodes(null,data,true);// 如果是根节点,那么就在null后面加载数据    
                    }    
                    else{    
                        treeObj.addNodes(treeNode,data,true);//如果是加载子节点,那么就是父节点下面加载    
                    }    
                }    
                treeObj.expandNode(treeNode,true, false, false);// 将新获取的子节点展开    
            }    
        },    
        error : function() {    
            alert("请求错误!");    
        }    
    });    
};   

就是一个简单的ajax请求。

还有就是在JS的初始化中把树结构初始化一下  $.fn.zTree.init($("#chooseXzqhTree"), setting);

到这里,一个简单的异步加载就完成了。

ZTree异步加载树结构

标签:node   var   syn   llb   提交   level   back   enable   key   

原文地址:https://www.cnblogs.com/yifanSJ/p/9117389.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!