ztree v3.5.18樹異步加載開發

ztree 官網地址:http://www.ztree.me/v3/api.php

1、jsp代碼

(1)、引入樣式和腳本

<link href="${ctx}/css/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/js/easydialog/easydialog.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="${ctx}/js/ztree/jquery.ztree.core-3.5.js"></script>

(2)、引入內容

        <div class="Tree" id="Tree" style="width: 500px; height: 250px; float: left;">
            <ul id="tree" class="ztree"></ul>
        </div>

(3)、js代碼

<script type="text/javascript">
var zTree;
var setting = {
    view: {
        showLine: true,
        selectedMulti: false //不可多選
    },
    data: {
        simpleData: {
            enable:true,
            idKey: "id",
            pIdKey: "pId",
            rootPId: 0
        }
    },
    async:{  
        autoParam:["id=catalogID"],
        otherParam:["type","M"],
        enable:true,
        dataType:"json",
        type:"get",
        url:"${ctx}/document/queryCatalogTree"
           },
    
  callback: {
            onAsyncError: function () {
            //請求失敗處理函數
            alert('異步加載請求失敗!');
        }  
    }
};

$(document).ready(function(){
    $.ajax({
        async : false,
        cache:false,
        type: 'GET',
        dataType : "json",
        url: "${ctx}/document/queryCatalogTree?type=M",//請求的controller路徑
        error: function () {
            //請求失敗處理函數
            alert('查詢目錄請求失敗!');
        },  
        success:function(data){ //請求成功後處理函數。    
            treeNodes = data;
        }  
    });  
    
    $.fn.zTree.init($("#tree"), setting, eval(treeNodes));
    
    if(treeNodes == '')
        {
          alert('未創建個人目錄 !');
        }
});
</script>


  (4)、獲取被選中的樹節點
    var treeObj = $.fn.zTree.getZTreeObj("tree");
    var nodes = treeObj.getSelectedNodes();

    nodes是數組類型

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章