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

2019-01-16 wjy329 Java学习 7

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

本文作者:wjy329
版权声明:本博客除特殊说明外均属本人原创。如需转载请署名作者及文章出处。
评论