關於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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。