jsTree外掛程式簡介 一

2021-06-05 15:42:24 字數 1046 閱讀 7819

在用jstree時可以使用幾種外掛程式來支援我們的行為,下面我簡要的介紹下各個外掛程式的使用。

1:html_data plugin。

html_data即我們要渲染的資料是用html格式來完成tree的展示。其中所要渲染的html資料可以來自直接的html文字,例如

$(function () ,

"html_data" : ,

"plugins" : [ "themes", "html_data" ]

});});

也可以是使用json取得的html,

$(function () ; }}

},"plugins" : [ "themes", "html_data" ]

});});

也可以是兩種情況的混合體。

我模擬了第一種情況,在  html_data.html中展示。

2、json_data:使用json格式的資料來展示樹結構,這是我使用的方式

這種方式也可以使用固定的json資料,也可以從後台取得json資料,還可以是兩者的混合,例子見  json_data.html

這裡提到乙個引數progressive_render,當有很多巢狀時可以把這個值設定為true。據說很有用

例如

$(function () ,

, "data" : } }

],"progressive_render" : true

},"plugins" : [ "themes", "json_data" ]

});});

3、xml_data plugin:這種外掛程式支援平行和巢狀的兩種xml格式,巢狀的結構和平行結構僅僅不同的是parent_id上,平行結構有parent_id屬性。

parent_id定義了在平行結構中的父節點,根節點值為0;

state:open or closed

item:對應了li

例子請見  xml_data.html

誒呀@!!!不能傳檔案

jsTree外掛程式簡介 二

1 themesplugin jstree的主題外掛程式 這個外掛程式控制這jstree的展示,如果沒有這個外掛程式,乙個jstree樹結構就是乙個有序的列表 屬性 url 定義主題的css檔案位置。可以設定為string為具體的位址,或者為false,為false時在 theme folder t...

jstree外掛程式學習筆記

為不同的節點生成不同右鍵選單 1 定義乙個函式,接收目標節點 node 根據這個節點生成響應不同的右鍵選單 function custommenu node deleteitem if node hasclass folder return items 上面的函式這麼呼叫 tree jstree 2...

jstree外掛程式的demo和相關資訊

jstree作為基於jquery的外掛程式,很好的方便的展示了樹形結構。具體 如下,照搬官網的demo jstree demo jstree data data function node types root default file plugins contextmenu dnd search ...