使用jsTree动态加载节点

　　因为项目的需要，需要做一个树状菜单，并且节点是动态加载的，也就是只要点击父节点，就会加载该节点下的子节点。

　　大致的效果实现如下图：

　　以上的实现就是通过jsTree实现的，一个基于JQuery的树状菜单插件，支持html,json,xml三种数据源，支持自定义主题，应该说是一个很强大的工具，现在我就把相关的代码，也是最常用的代码贴出来供大家参考。

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

以下为代码片段：

　　　　按我自己的理解方式，我定义了两种初始化方式，数据源都是采用的html，以下为详细的使用过程。

　　　　第一种：使用默认的html元素初始化jsTree(本地初始化，无需动态加载)

　　　　　　　　1）定义div容器

 1 <div id="jsTree">
 2     <ul>
 3         <li>
 4             <a href="#">node1</a>
 5             <ul>
 6                 <li>
 7                     <a href="#">node1</a>
 8             </li>
 9         </ul>
10         </li>
11         <li>
12             <a href="#">node2</a>
13         </li>
14     </ul>
15 </div>

　　　　　　　　2）初始化jsTree

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

　　　　第二种：使用自定义或给定的html元素（作为父节点）初始化jsTree

　　　　　　　　1）定义div容器

1 <div id="jsTree"><div>

　　　　　　　　 2）初始化jsTree

 1 $(document).ready(function(){
 2     var root = $("#root").html();
 3     $("#jsTree").jstree({
 4         "themes" : {
 5             "theme" : "apple",                   //定义主题风格，此处为苹果系统风格
 6         },
 7         "html_data":{
 8             "data":"<li class="jstree-closed" id=""><a href="#">node1</a></li>",//自定义用于初始化的父节点，此处默认为关闭状态，class属性值“jstree-closed”指定
 9             "ajax":{　　　　　　　　　　　　　　　　　//打开父节点时，将会触发ajax请求，以用来加载该父节点下的子节点
10                 "url":"",                        //用于获取子节点的链接地址
11                 "data":function(n){              //请求上述链接地址返回的html数据，结果格式为"<li><a href="#">node_1</a></li>",可以含有多个li元素(也就是所需要的多个字节点)
12                     return {
13                         "configId":n.attr("id")  //父节点id,用于获取子节点
14                     };
15                 }
16             }
17         },
18         "plugins" : [ "themes", "html_data" ,"ui"] //定义jsTree中需要使用的插件
19         
20     });
21 });

以上为我个人的使用体验，仅供参考