使用jsTree按需裝載子節點

2021-08-30 16:29:11 字數 1192 閱讀 4970

一、jstree的基本使用方法;

二、按需裝載子節點,即每次展開某節點時,才去伺服器裝載其子節點。

jstree是基於jquery的乙個樹形外掛程式,該專案主頁:

一、jstree的基本使用方法:

1. 在頁面匯入必要的庫檔案:

2. 在頁面需要顯示樹的地方:

3. 生成樹的js方法:

$("#mytree").tree(

});

其中type指返回的資料型別,這裡設定為json,所以url請求返回的資料必需是jstree約定的json格式,對於每個節點最基本的格式如下:

, 

data: "node_title",

// properties below are only used for non-leaf nodes

state: "closed", // or "open"

children: [ /* an array of child nodes objects */ ]

}

attributes裡為自定義屬性,data為節點顯示的文字,state值為closed時,節點前面有表示節點可以被展開的標識。還有其它寫法可參考documentation.html裡的datastores段。

二、按需裝載子節點:

在上面基本使用方法的第3點裡提到更多配置可參考documentation.html裡的configuration段,其中有乙個callback配置項,按需裝載子節點可以通過這裡的onopen事件觸發,即當展開節點時。在上面第3點的**裡加上callback配置項如下:

$("#mytree").tree(,

callback : , function(data) );

});}

return true;

} }});

其中, $.getjson和$.each方法是jquery中的方法,children和create是jstree的方法,在documentation.html裡的api段裡可找到它們的使用說明。上面**中依次出現的引數,node是要展開的節點物件,tree_obj是整個樹物件,data是請求返回的json格式資料,依然是要符合之前提到的約定格式。entry是遍歷返回的節點陣列時的當前節點,entryindex是其在陣列中的索引。

Jstree子節點與父節點的級聯選擇修改

1.選定父節點時其子節點預設全選?2.跨過父節點 展開所有節點 選定子節點時其其父節點的父節點的父節點的 父節點不自己動選定?但是作為乙個成熟的許可權組,我們要的是它 1.選定父節點時只選定當前節點,不選定其子節點 2.跨過父節點 展開所有節點 選定子節點時,自動選定其父節點的父節點的父節點的 父節...

jsTree使用記錄,節點操作及選中等

在開發過程中有乙個場景,樹是乙個專案迭代樹,每乙個節點都是乙個專案,樹上面也可以建立資料夾節點將同一型別或者同乙個專案的迭代版本放置到一起集中管理,這時候在頁面新增了乙個迭代版本,建立的時候邏輯並不是在樹上面走,但是建立完了之後希望能在樹上面體現出來,重新整理樹節點資料並且選中新建的這個節點,將新建...

使用JQuery獲取節點與其子節點的方法

對於頁面中的html片段 div id dem span 單號 span rc 12345854635 div 使用jquery獲取div的文字節點 var str dem text 得到的內容 str 單號 rc 12345854635,即取得了div節點的全部文字內容。要想獲得div主節點的文字...