【JSTREE】動態載入子節點

標籤：hid   code   and   class   http   定義   out   .net   query   

js中初始化jstree

$(‘#contact-org‘).jstree({                      "data" : {                          "dataType": ‘json‘,                          "url":function(node){                              return ctxPath + "/v-contact?queryOrg";                          },                          "data":function(node){                              return {"id" : node.id};                          }                      }                  }  }  

View Code

返回的json資料，對應用於樹節點的資料結構：

 {        "attr" : {"id":"標示 "},      "data" :{"title": " 顯示的標題 "  　　　　       ,"attr":{"href" :"可以自訂一些值，在UI 解析"  　　          　              ,"class": "jstree-search"//可以預先在後台給節點設定樣式                  }            　 　　,"icon":" 表徵圖的地址  "             　　},         "state" : "closed" 或"open",            "children":[{子節點1},{子節點2}]  }  

View Code

實現子節點動態載入的關鍵所在：

返回的資料中將children設定成布爾型true或者false。

當設定成true時，點擊該樹節點，jstree就會進行一次請求，請求的url和data配置就是初始化jstree中的那些。

當設定成false時，jstree就將該節點當成葉子節點

 

這樣子就實現了jstree的動態載入子節點的功能。

【JSTREE】動態載入子節點