zTree的使用-初始化、异步加载数据

zTree的官方网站:    http://www.treejs.cn/v3/main.php#_zTreeInfo

如何引入js和css,这里就不介绍了,直接看官方文档即可—zTree入门指南

在html中找到你要放置zTree的地方,id可变,class为ztree

<ul id="tree" class="ztree"></ul>
<script type="text/javascript">
    //加载资源树
    var t = $("#tree");
    var zNodes ;
     //zTree参数设置
    var setting = {
        treeId:"applicationTree",
        view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false
        },
        edit: {
            
        },
        data: {      
            simpleData: {
                enable:true
            }
        },
        callback: {
            
        }
    };
</script>

js中的其他几个为空,自己可以看文档配置

这里开启了简单的数据格式加载数据,数据格式如下

   {"id":1, "pId":0, "name":"test1"},
    {"id":11, "pId":1, "name":"test11"},
    {"id":12, "pId":1, "name":"test12"},
    {"id":111, "pId":11, "name":"test111"}

然后异步加载数据,后台返回数据格式的方法自己完成:

//页面加载
$(document).ready(function(){
    $.ajax({
        type:'post',
        url: "/perm/treeData",  //数据源
        dataType: "json",
        async: false,
        success: function (result) {
            if(result.code == "1"){
                zNodes = result.data;
                //初始化树
                t = $.fn.zTree.init(t, setting, zNodes); 
            }else{
                //layer.msg(result.info, {time: 1000, icon:2});
                console.log("error");
            }

        },
        error: function (msg) {
        }
    });
});

这样就可以加载树了

image.png

Leave a Reply