利用jstree插件輕松構建樹應用
最近完成了項目中的一個樹狀應用，第一次接觸了jstree這個插件，總的來說它的官方文檔還是比較詳細的，但是在使用過程中還是出現了一些問題，下面我就來談談這款插件的使用和心得。
首先項目需要構建一棵樹，利用jstree插件我們先在頁面上靜態的把這棵樹渲染出來，參照官方文檔（http://www.jstree.com/），代碼如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <link rel="stylesheet" type="text/css" href="js/jstree/themes/default/style.min.css">
7 </head>
8 <body>
9 <div id="jstree">
10
11 </div>
12 <script src="js/jquery.js"></script>
13 <script src="js/jstree/jstree.min.js"></script>
14 <script src="js/jstree/jstree.checkbox.js"></script>
16 <script>
17 $(function(){
18 $("#jstree").jstree({
19 "plugins" : ["checkbox"],
20 'core' : {
21 'data' : [
22 { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
23 { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
24 { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
25 { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
26 ]
27 });
28 });
29 </script>
30 </body>
31 </html>
現在我們的數據是通過JS完全寫死的，真實項目中我們需要向后台發送請求獲取渲染數據，所以得利用jstree自己封裝的ajax方式，代碼如下：
1 <script>
2 $(function(){
3 $("#jstree").jstree({
4 "plugins" : ["checkbox"],
5 'core' : {
6 'data' : {
7 'url' : '/usual/psd_demo_push/1/', //請求地址
8 'data' : function (node) {
9 return { 'id' : node.id };
10 }
11 }
12 });
13 });
14 </script>
這樣這個插件就會向
'/usual/psd_demo_push/1/'
發送請求，返回的數據和原來我們靜態寫死在js里的格式是一致的，但需要注意的是，這一數據必須是json對象（object），如果返回的json字符串（string）渲染頁面也會失敗，這一問題
非常不易發現，因為通過瀏覽器觀察這兩種數據是一樣的，當我用typeof將其格式打印出來后只有顯示object的才能渲染出來，同時我們能使用的屬性也必須按照官方文檔提供的那樣，額外屬性則必須寫在li_attr或a_attr中，否則是取不到值的：
1 {
2 id : "string"
3 parent : "string"
4 text : "string"
5 icon : "string"
6 state : {
7 opened : boolean
8 disabled : boolean
9 selected : boolean
10 },
11 li_attr : {}
12 a_attr : {}
13 }
剛才我們通過動態的方式實現了樹的顯示，但是如果服務器端傳輸的數據量很大，我們需要異步加載數據的話，jstree也提供了這一的功能，在剛才的js代碼中的已經運用到了，即：
1 'data' : function (node) {
2 return { 'id' : node.id };
3 }
但是如果按照上述方法進行測試確是行不通的，因為通過上述形式的data格式，我們只知道每一個節點的父節點（parent）是哪一個，但是我們不知道該節點下是否存在子節點，所以我們點擊父節點的時候沒有辦法判斷該節點下的子節點個數，也就無法從后台獲取數據，通過查閱官方文檔及所搜其他資料后發現，如果需要異步獲取數據，data的格式必須使用官方提供的第二種形式：
1 'data' : [
2 'Simple root node',
3 {
4 'text' : 'Root node 2',
5 'state' : {
6 'opened' : true,
7 'selected' : true
8 },
9 'children' : [
10 { 'text' : 'Child 1' },
11 'Child 2'
12 ]
13 }
14 ]
在這一種json形式中提供了每一個節點的'children'屬性，如果沒有則不含子節點，這樣當存在子節點時后台提供'children':true就ok了，當點擊該節點展開按鈕后children中的json內容就會動態渲染到頁面中，實現異步獲取，大大減輕了頁面的數據傳輸量。
所以最后建議使用第二種格式，如下：
1 {
2 id : "string"
3 text : "string"
4 icon : "string"
5 state : {
6 opened : boolean
7 disabled : boolean
8 selected : boolean
9 },
10 children : []
11 li_attr : {}
12 a_attr : {}
13 }
具體的演示操作官方也提供了它的地址：
http://jsfiddle.net/vakata/2kwkh2uL/5/
大家可以對其進行調試，觀察其數據請求的形式和內容，對使用該插件會有很大的幫助，同時官方文檔也提供了非常豐富的api，github：
https://github.com/vakata/jstree#the-required-json-format