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