关于zTree的html坑

时间 2019-11-21

标签关于 ztree html 栏目 HTML 繁體版

原文原文链接

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>index.html</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="zTree_v3/css/zTreeStyle/zTreeStyle.css">

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript"  src="zTree_v3/js/jquery.ztree.core-3.5.js"></script>

    <script src="ImageList/js/image.js"></script>

</head>

<body>
<div style="width:15%;">
    <ul id="demotree" class="ztree"></ul>
</div>
</body>

<script type="text/javascript">
    var zTree;
    var treeNodes;
    var setting = {
        data : {
            simpleData : {
                enable : true,
                idKey : "id",
                pIdKey : "pId",

            }
        },
    };
    $(function(){
     
        $.ajax({
            async : false,
            cache:false,
            type: 'POST',
            dataType : "json",
            url: "",//请求的action路径
            contentType:"application/json",
            data:JSON.stringify(data),
            error: function () {//请求失败处理函数
                alert('请求失败');
            },
            success:function(data){ //请求成功后处理函数。
                treeNodes=data;
            }
        });
    });


    //初始化节点
    $(document).ready(function(){
        $.fn.zTree.init($("#demotree"), setting, treeNodes);
    });
</script>
</html>

注：setting 内的值能影响到封装数据的格式，当前为[{id:"1",name:"节点1"pId：“0”,open:true}] 该数据为data后端封装传入javascript

注意加载顺序，保证ajax异步的时候能够获取到相应的值css