ztree + jQuery 動態加載樹。

項目要加載樹形結構，以前只見過，根本沒有本身寫過，因此在百度，google以後發現

這個ztree很不錯，還有中文的API，果斷選中這個。

下面是一些代碼，通過告終構修改。

在一個js文件裏寫好樹，在別的地方就能直接去加載了，下面是這個JS文件裏的幾塊核心內容。

var setting = {
    view: {dblClickExpand: false, showLine: false, showIcon: false},
    data: {simpleData: {enable: true}},
    callback: {onClick: onClick}
};

function loadTree() {
    var str = "[";
    jQuery.ajax({
        async: false,
        cache: false,
        type: 'POST',
        dataType: "json",
        url: "getAllArea.do", //請求的action路徑
        error: function() {//請求失敗處理函數
            alert('顯示失敗！');
        },
        success: function(data) { //請求成功後處理函數。此處的data是JSON對象
            jQuery.each(data, function(i, item) {
                str = str + "{ id:" + item.areaID + ", pId:" + item.parentID + ", open: true , name:\"" + item.areaName + "\"},";
            });
            str = str.substring(0, str.length - 1);
            str = str + "]";//此時str是JSON字符串//console.log(str);
            oStr = eval("(" + str + ")");//這貨究竟是作神馬啊?把JSON字符串轉換成JSON對象
        }
    });
    jQuery.fn.zTree.init(jQuery("#areaTree"), setting, oStr);//實例化areaTree
}

function onClick(e, treeId, treeNode) {

var zTree = jQuery.fn.zTree.getZTreeObj("areaTree");
    zTree.expandNode(treeNode);//單擊展開樹
　　//treeNode.name//獲取當前點擊節點的名字
   //treeNode.getParentNode().name//獲取父節點的名字
   //treeNode.getParentNode().pId;//獲得父節點的父節點id。
　　//treeNode.level;//定義當前點擊爲幾級節點？？？
    }
}

這裏就不在累述這些節點的做用了。

最後添加一個遍歷某節點下全部子節點的方法

function getAllChildrenNodes(treeNode, result) {
    var childrenNodes = treeNode.children;
    if (childrenNodes) {
        for (var i = 0; i < childrenNodes.length; i++) {
            result += "," + childrenNodes[i].id;
            result = getAllChildrenNodes(childrenNodes[i], result);
        }
    }
    return result;
}

若是你要刪除一個節點下的全部節點和當前節點，至於要在這個方法調用以後

在前面加上本節點就行啦，再去刪除就能夠啦。

 最後你在html或者jsp頁面裏面只要引用這個正確了就行

好比這樣

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/ztree/jquery.ztree.core-3.5.js" type="text/javascript"></script>
<script src="js/這個treejs所在的文件.js" type="text/javascript"></script>

最後在頁面加載時寫上。

jQuery(document).ready(function() {
　　loadAreaTree();
});

想要加在樹的位置上直接寫上

<div ><!--這裏面放樹-->
         <ul id="areaTree" class="ztree"></ul><!-- Ztree 動態加載樹的地方 --> 
</div>

大功告成。