基于jstree使用JSON數(shù)據(jù)組裝成樹
概述：
前面主要是html數(shù)據(jù)，這里主要是json數(shù)組
1.格式
jsTree需要一個具體格式JSON數(shù)據(jù)，在標準的語法沒有那個字段是必須的-而是那些是你需要的。請記住你可以獲取任何你請求的其他屬性，jsTree將會不會碰他們，你將有可能在隨后使用它們。
為了改變節(jié)點的圖標你可以是用屬性icon。具體的字符串需要包含/的一個圖片的url路徑，你可以使用任何其它字符串應用類樣式去修飾<i>元素，它將會被用呈現(xiàn)這個圖標。你可以使用boolean 值false來jsTree在渲染節(jié)點時沒有圖標。
你可以設置一個節(jié)點的狀態(tài)使用state屬性，它值可以使如下值得組合：opened,selected,disabled.
li_attr和a_attr可以直接通過jQuery屬性函數(shù)獲取。
當使用AJAX設置children為false，jsTree將會將渲染這個節(jié)點為關閉狀態(tài)，如果需要打開的時候需要發(fā)送額外的請求。
如何內部children都應該遵循相同的格式，或者是普通字符串(這個字符串作為普通文本和任何其它自動生成的)
// 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格式
如果你不想使用內部children的方式，你可以使用可選語法，每個節(jié)點需要包含兩個必須字段：id和parent，沒有children屬性（其它都保持這個格式）
jsTree將會自動構建這個層次關系，為表明一個節(jié)點應該是根節(jié)點可是設置parent屬性為"#".
這個種方式大多數(shù)用于一次性渲染整棵樹，這個數(shù)據(jù)存儲在數(shù)據(jù)庫之間有聯(lián)結關系。
為了使用JSON來渲染一棵樹，你需要使用$.jstree.defaults.core.data配置選項
這個希望格式為一個數(shù)組節(jié)點。每個節(jié)點應該是一個如上所描述的對象或者是一個簡單的字符串（這種情況字符串被用來作為一個節(jié)點的文本替換自動生成的文本），任何內部子節(jié)點格式是一樣的。
// 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來渲染一棵樹，你需要使用$.jstree.defaults.core.data配置選項。
這個希望格式為一個數(shù)組節(jié)點。每個節(jié)點應該是一個如上所描述的對象或者是一個簡單的字符串（這種情況字符串被用來作為一個節(jié)點的文本替換自動生成的文本），任何內部子節(jié)點格式是一樣的。
$('#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向服務器請求返回一個json數(shù)據(jù)來渲染樹，這個格式如上所示，這里唯一不同就是JSON是不可見，它是服務器返回的。
為了使用這個特性，你需要使用$.jstree.defaults.core.data配置選項。
僅僅是使用標準jquery像AJAX配置和jstree將會自動做出一個AJAX請求而返回數(shù)據(jù)。
除了標準jQuery ajax選項，你可以提供data函數(shù)和url路徑，這個功能將會運行當前的實例范圍內，一個參數(shù)被通過表明這個節(jié)點被加載了，這個返回值將會用作各自的URL和data。
如果你并不會返回json頭部信息，至少設置數(shù)據(jù)類型 jQuery AJAX的選項為“json”。
6.使用函數(shù)
你可以提供一個函數(shù)，這個函數(shù)將會接受兩個參數(shù)，節(jié)點加載和回調函數(shù)。
$('#tree').jstree({
'core' : {
'data' : function (obj, cb) {
cb.call(this,
['Root 1', 'Root 2']);
}
}});
- 基于jstree使用AJAX請求獲取數(shù)據(jù)形成樹
- jstree創(chuàng)建無限分級樹的方法【基于ajax動態(tài)創(chuàng)建子節(jié)點】
- 基于BootStrap Metronic開發(fā)框架經(jīng)驗小結【二】列表分頁處理和插件JSTree的使用
- jsTree 基于JQuery的排序節(jié)點 Bug
- jquery下jstree簡單應用 - v1.0
- jquery.jstree 增加節(jié)點的雙擊事件代碼
- 基于jsTree的無限級樹JSON數(shù)據(jù)的轉換代碼
- JQery jstree 大數(shù)據(jù)量問題解決方法
- jsTree樹控件(基于jQuery, 超強悍)[推薦]
- jsTree事件和交互以及插件plugins詳解
相關文章
這篇文章主要介紹了Java如何實現(xiàn)Unicode和中文相互轉換問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了Java基礎知識,本文介紹了Java語言相關的基礎知識、歷史介紹、主要應用方向等內容,需要的朋友可以參考下，希望對你有所幫助2021-07-07
這篇文章主要為大家介紹了springboot?之Jpa通用接口及公共方法使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
Java數(shù)據(jù)結構之單鏈表的實現(xiàn)與面試題匯總
由于順序表的插入刪除操作需要移動大量的元素，影響了運行效率，因此引入了線性表的鏈式存儲——單鏈表。本文為大家介紹了單鏈表的實現(xiàn)與面試題匯總，感興趣的可以了解一下2022-10-10
mybatis批量update時報錯multi-statement not allow的問題
這篇文章主要介紹了mybatis批量update時報錯multi-statement not allow的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
代理模式（Proxy Parttern）為一個對象提供一個替身，來控制這個對象的訪問，即通過代理對象來訪問目標對象。本文將通過示例詳細講解一下這個模式，需要的可以參考一下2022-09-09
這篇文章主要介紹了java中的前++和后++的區(qū)別示例代碼詳解，其實大家只要記住一句話就可以了，前++是先自加再使用而后++是先使用再自加，本文通過代碼給大家詳細解說，感興趣的朋友跟隨小編一起看看吧2020-06-06
這篇文章主要為大家介紹了Java常用加密方法AES?SHA1?md5總結及示例demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
SpringMVC實現(xiàn)Validation校驗過程詳解
這篇文章主要介紹了SpringMVC實現(xiàn)Validation校驗過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細介紹了Java實現(xiàn)文件的分割與合并，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08