使用jsTree動態加載節點

　　因為項目的需要，需要做一個樹狀菜單，並且節點是動態加載的，也就是只要點擊父節點，就會加載該節點下的子節點。

　　大致的效果實現如下圖：

　　

　　

 

　　以上的實現就是通過jsTree實現的，一個基於JQuery的樹狀菜單插件，支持html,json,xml三種數據源，支持自定義主題，應該說是一個很強大的工具，現在我就把相關的代碼，也是最常用的代碼貼出來供大家參考。

　　jsTree官網地址：http://www.jstree.com/

    以下為代碼片段：

　　　　按我自己的理解方式，我定義了兩種初始化方式，數據源都是采用的html，以下為詳細的使用過程。

　　　　第一種：使用默認的html元素初始化jsTree(本地初始化，無需動態加載)

　　　　　　　　1）定義div容器

　　　　　　　　　　

<div id="jsTree">
    <ul>
        <li>
            <a href="#">node1</a>
            <ul>
                <li>
                    <a href="#">node1</a>
            </li>
        </ul>
        </li>
        <li>
            <a href="#">node2</a>
        </li>
    </ul>
</div>                        

　　　　　　　　2）初始化jsTree

$(document).ready(function(){
    $("#jsTree").jstree({
        "themes" : {
            "theme" : "apple",
         },
            "plugins" : [ "themes", "html_data", "ui"]
    });
});

 　　　　第二種：使用自定義或給定的html元素（作為父節點）初始化jsTree

　　　　　　　　1）定義div容器

 

<div id="jsTree"><div>

 

　　　　　　　　  2）初始化jsTree

$(document).ready(function(){
    var root = $("#root").html();
    $("#jsTree").jstree({
        "themes" : {
            "theme" : "apple",                   //定義主題風格，此處為蘋果系統風格
        },
        "html_data":{
            "data":"<li class="jstree-closed" id=""><a href="#">node1</a></li>",//自定義用於初始化的父節點，此處默認為關閉狀態，class屬性值“jstree-closed”指定
            "ajax":{　　　　　　　　　　　　　　　　　//打開父節點時，將會觸發ajax請求，以用來加載該父節點下的子節點
                "url":"",                        //用於獲取子節點的鏈接地址
                "data":function(n){              //請求上述鏈接地址返回的html數據，結果格式為"<li><a href="#">node_1</a></li>",可以含有多個li元素(也就是所需要的多個字節點)
                    return {
                        "configId":n.attr("id")  //父節點id,用於獲取子節點
                    };
                }
            }
        },
        "plugins" : [ "themes", "html_data" ,"ui"] //定義jsTree中需要使用的插件
        
    });
});

 

以上為我個人的使用體驗，僅供參考