jsTree本身自帶了很多例子，但是并沒(méi)有調(diào)用AJAX構(gòu)建Tree的例子，在查看源代碼后發(fā)現(xiàn)只需要在beforedata方法進(jìn)行覆蓋就可以實(shí)現(xiàn)子節(jié)點(diǎn)AJAX加載
測(cè)試代碼如下：
1 <!DOCTYPE html
2 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>jsTree » Demos</title>
8
9 <script type="text/javascript" src="js/lib/jquery.js"></script>
10 <script type="text/javascript" src="js/lib/jquery.cookie.js"></script>
11 <script type="text/javascript" src="js/lib/jquery.hotkeys.js"></script>
12 <script type="text/javascript" src="js/lib/jquery.metadata.js"></script>
13 <script type="text/javascript" src="js/lib/sarissa.js"></script>
14 <script type="text/javascript" src="js/jquery.tree.js"></script>
15 <script type="text/javascript" src="js/plugins/jquery.tree.checkbox.js"></script>
16 <script type="text/javascript"
17 src="js/plugins/jquery.tree.contextmenu.js"></script>
18 <script type="text/javascript" src="js/plugins/jquery.tree.cookie.js"></script>
19 <script type="text/javascript" src="js/plugins/jquery.tree.hotkeys.js"></script>
20 <script type="text/javascript" src="js/plugins/jquery.tree.metadata.js"></script>
21 <script type="text/javascript"
22 src="js/plugins/jquery.tree.themeroller.js"></script>
23 <script type="text/javascript" src="js/plugins/jquery.tree.xml_flat.js"></script>
24 <script type="text/javascript"
25 src="js/plugins/jquery.tree.xml_nested.js"></script>
26
27 <link type="text/css" rel="stylesheet" href="syntax/shCore.css" />
28 <link type="text/css" rel="stylesheet" href="syntax/shThemeDefault.css" />
29 <style type="text/css">
30 html,body {
31 margin: 0;
32 padding: 0;
33 }
34
35 body,td,th,pre,code,select,option,input,textarea {
36 font-family: "Trebuchet MS", Sans-serif;
37 font-size: 10pt;
38 }
39
40 #container {
41 width: 800px;
42 margin: 10px auto;
43 overflow: hidden;
44 }
45
46 .demo {
47 height: 200px;
48 width: 300px;
49 float: left;
50 margin: 0;
51 border: 1px solid gray;
52 font-family: Verdana;
53 font-size: 10px;
54 background: white;
55 overflow: auto;
56 }
57
58 .code {
59 width: 490px;
60 float: right;
61 margin: 0 0 10px 0;
62 border: 1px solid gray;
63 }
64
65 pre {
66 display: block;
67 }
68
69 .syntaxhighlighter {
70 margin: 0 0 0 0 !important;
71 padding: 0 !important;
72 }
73 </style>
74 </head>
75 <body>
76 <div id="container">
77 <h1 class="title">Async JSON demo</h1>
78 <p>Same as with the HTML datastore you can load data from a file.</p>
79 <script type="text/javascript" class="source">
80 var stat = [
81 { attributes : { "id" : "node_1" }, data : "Node 1" },
82 { attributes : { "id" : "node_2" }, data : "Node 2", state : "closed"},
83 { attributes : { "id" : "node_3" }, data : "Node 3", state : "closed"}
84 ];
85 $(function () {
86 $.ajaxSetup({cache:false});//ajax調(diào)用不使用緩存
87 $("#async_json_1").tree({
88 data : {
89 type : "json",
90 async : true,
91 opts : {
92 async : true,
93 method : "GET",
94 url : "async_json_data.json"
95 }
96 },
97 lang:{
98 loading:"目錄加載中……" //在用戶(hù)等待數(shù)據(jù)渲染的時(shí)候給出的提示內(nèi)容，默認(rèn)為loading
99 },
100 ui:{
101 theme_name:'classic' //設(shè)置樣式
102 },
103 callback : {
104 // Make sure static is not used once the tree has loaded for the first time
105 onload : function (t) {
106 t.settings.data.opts.static = false;
107 },
108 //n--節(jié)點(diǎn)，t是tree
109 beforedata : function (n, t) {
110 if(n == false)
111 t.settings.data.opts.static = stat;
112 else
113 return {parent_Id/*參數(shù)名稱(chēng)*/ : $(n).attr("id") || false}// AJAX調(diào)用參數(shù)傳遞
114 }
115 },
116 //插件使用右鍵菜單支持自定義右鍵菜單
117 plugins:{
118 contextmenu:{}
119 }
120
121 });
122 });
123 </script>
124 <div class="demo" id="async_json_1"></div>
125 </div>
126 </body>
127 </html>
測(cè)試數(shù)據(jù)：async_json_data.json
1 [
2 { data : "A node", children : [ { data : "Only child"} ], state : "closed"},
3 { data : "Some other node",attributes:{id:4},state : "closed"}
4 ]
源碼：
http://www.aygfsteel.com/Files/xiaochao/jstreedemo.rar