概述：

前面主要是html數(shù)據(jù)，這里主要是json數(shù)組

1.格式

jsTree需要一個(gè)具體格式JSON數(shù)據(jù)，在標(biāo)準(zhǔn)的語(yǔ)法沒(méi)有那個(gè)字段是必須的-而是那些是你需要的。請(qǐng)記住你可以獲取任何你請(qǐng)求的其他屬性，jsTree將會(huì)不會(huì)碰他們，你將有可能在隨后使用它們。

為了改變節(jié)點(diǎn)的圖標(biāo)你可以是用屬性icon。具體的字符串需要包含/的一個(gè)圖片的url路徑，你可以使用任何其它字符串應(yīng)用類(lèi)樣式去修飾<i>元素，它將會(huì)被用呈現(xiàn)這個(gè)圖標(biāo)。你可以使用boolean 值false來(lái)jsTree在渲染節(jié)點(diǎn)時(shí)沒(méi)有圖標(biāo)。

你可以設(shè)置一個(gè)節(jié)點(diǎn)的狀態(tài)使用state屬性，它值可以使如下值得組合：opened,selected,disabled.

li_attr和a_attr可以直接通過(guò)jQuery屬性函數(shù)獲取。

當(dāng)使用AJAX設(shè)置children為false，jsTree將會(huì)將渲染這個(gè)節(jié)點(diǎn)為關(guān)閉狀態(tài)，如果需要打開(kāi)的時(shí)候需要發(fā)送額外的請(qǐng)求。

如何內(nèi)部children都應(yīng)該遵循相同的格式，或者是普通字符串(這個(gè)字符串作為普通文本和任何其它自動(dòng)生成的)

// Expected format of the node (there are no required fields) 
{ 
 id     : "string" // will be autogenerated if omitted 
 text    : "string" // node text 
 icon    : "string" // string for custom 
 state    : { 
  opened  : boolean // is the node open 
  disabled : boolean // is the node disabled 
  selected : boolean // is the node selected 
 }, 
 children  : [] // array of strings or objects 
 li_attr   : {} // attributes for the generated LI node 
 a_attr   : {} // attributes for the generated A node 
} 

2.可選擇JSON格式

如果你不想使用內(nèi)部children的方式，你可以使用可選語(yǔ)法，每個(gè)節(jié)點(diǎn)需要包含兩個(gè)必須字段：id和parent，沒(méi)有children屬性（其它都保持這個(gè)格式）

jsTree將會(huì)自動(dòng)構(gòu)建這個(gè)層次關(guān)系，為表明一個(gè)節(jié)點(diǎn)應(yīng)該是根節(jié)點(diǎn)可是設(shè)置parent屬性為"#".

這個(gè)種方式大多數(shù)用于一次性渲染整棵樹(shù)，這個(gè)數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)庫(kù)之間有聯(lián)結(jié)關(guān)系。

為了使用JSON來(lái)渲染一棵樹(shù)，你需要使用$.jstree.defaults.core.data配置選項(xiàng)

這個(gè)希望格式為一個(gè)數(shù)組節(jié)點(diǎn)。每個(gè)節(jié)點(diǎn)應(yīng)該是一個(gè)如上所描述的對(duì)象或者是一個(gè)簡(jiǎn)單的字符串（這種情況字符串被用來(lái)作為一個(gè)節(jié)點(diǎn)的文本替換自動(dòng)生成的文本），任何內(nèi)部子節(jié)點(diǎn)格式是一樣的。

// Alternative format of the node (id & parent are required) 
{ 
 id     : "string" // required 
 parent   : "string" // required 
 text    : "string" // node text 
 icon    : "string" // string for custom 
 state    : { 
  opened  : boolean // is the node open 
  disabled : boolean // is the node disabled 
  selected : boolean // is the node selected 
 }, 
 li_attr   : {} // attributes for the generated LI node 
 a_attr   : {} // attributes for the generated A node 
} 

3.使用JSON

為了使用JSON來(lái)渲染一棵樹(shù)，你需要使用$.jstree.defaults.core.data配置選項(xiàng)。

這個(gè)希望格式為一個(gè)數(shù)組節(jié)點(diǎn)。每個(gè)節(jié)點(diǎn)應(yīng)該是一個(gè)如上所描述的對(duì)象或者是一個(gè)簡(jiǎn)單的字符串（這種情況字符串被用來(lái)作為一個(gè)節(jié)點(diǎn)的文本替換自動(dòng)生成的文本），任何內(nèi)部子節(jié)點(diǎn)格式是一樣的。

 $('#using_json').jstree({ 'core' : { 
  'data' : [ 
    'Simple root node', 
    { 
     'text' : 'Root node 2', 
     'state' : { 
      'opened' : true, 
      'selected' : true 
     }, 
     'children' : [ 
      { 'text' : 'Child 1' }, 
      'Child 2' 
     ] 
   } 
  ] 
} }); 

4.使用可選json格式

$('#using_json_2').jstree({ 'core' : { 
  'data' : [ 
    { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, 
    { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, 
    { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, 
    { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, 
  ] 
} }); 

5.使用AJAX

你可以使用AJAX向服務(wù)器請(qǐng)求返回一個(gè)json數(shù)據(jù)來(lái)渲染樹(shù)，這個(gè)格式如上所示，這里唯一不同就是JSON是不可見(jiàn)，它是服務(wù)器返回的。

為了使用這個(gè)特性，你需要使用$.jstree.defaults.core.data配置選項(xiàng)。

僅僅是使用標(biāo)準(zhǔn)jquery像AJAX配置和jstree將會(huì)自動(dòng)做出一個(gè)AJAX請(qǐng)求而返回?cái)?shù)據(jù)。

除了標(biāo)準(zhǔn)jQuery ajax選項(xiàng)，你可以提供data函數(shù)和url路徑，這個(gè)功能將會(huì)運(yùn)行當(dāng)前的實(shí)例范圍內(nèi)，一個(gè)參數(shù)被通過(guò)表明這個(gè)節(jié)點(diǎn)被加載了，這個(gè)返回值將會(huì)用作各自的URL和data。

如果你并不會(huì)返回json頭部信息，至少設(shè)置數(shù)據(jù)類(lèi)型 jQuery AJAX的選項(xiàng)為“json”。

6.使用函數(shù)

你可以提供一個(gè)函數(shù)，這個(gè)函數(shù)將會(huì)接受兩個(gè)參數(shù)，節(jié)點(diǎn)加載和回調(diào)函數(shù)。

$('#tree').jstree({ 
  'core' : { 
    'data' : function (obj, cb) { 
      cb.call(this, 
       ['Root 1', 'Root 2']); 
    } 
  }}); 

最新評(píng)論