jsTree事件和交互以及插件plugins詳解
本文為大家分享了jsTree事件和交互以及插件plugins，供大家參考，具體內(nèi)容如下
1、事件
jsTree在容器中觸發(fā)變量事件，你可以瀏覽所有事件，然后了解如何進行監(jiān)聽：https://www.jstree.com/api/#/?q=.jstree%20Event
通過data參數(shù)獲取更多詳細(xì)信息關(guān)于事件檢查。
更多情況下就是你會得到所有節(jié)點對象，如果你通過ID獲取這個節(jié)點，查看節(jié)點使用.get_node().
$('#jstree')
// listen for event
.on('changed.jstree', function (e, data) {
var i, j, r = [];
for(i = 0, j = data.selected.length; i < j; i++) {
r.push(data.instance.get_node(data.selected[i]).text);
}
$('#event_result').html('Selected: ' + r.join(', '));
})
// create the instance
.jstree();
2.交互
為了在一個實例中調(diào)用一個方法，你必須要獲取實例引用然后調(diào)用方法，這個例子展示如何獲取一個引用然后調(diào)取一個方法。
可以查看API獲取更多的方法：https://www.jstree.com/api/#/?q=(
// 3 ways of doing the same thing
$('#jstree').jstree(true)
.select_node('mn1');
$('#jstree')
.jstree('select_node', 'mn2');
$.jstree.reference('#jstree')
.select_node('mn3');
3、插件
jsTree有些功能被移除核心，只有你需要的時候才使用它，為了確保使用插件，需要使用plugins參數(shù)配置選項，將插件名稱添加到一個數(shù)組中。
舉個例子確保所有插件都可以使用：（只要設(shè)置你需要使用的插件）
"plugins" : [ "checkbox", "contextmenu", "dnd", "massload", "search", "sort", "state", "types", "unique", "wholerow", "changed", "conditionalselect" ]
這里有快速預(yù)覽每一個插件
3.1、changed plugin (改變插件)
這個插件添加關(guān)于選擇改變的額外的信息，一旦包含plugins配置選項，每個changed.jstree事件數(shù)據(jù)將會包含一個新的屬性名稱為changed,它將給出最后關(guān)于seleted和deselected節(jié)點的事件（changed.jstree）
$(function () {
$("#plugins")
.on("changed.jstree", function (e, data) {
console.log(data.changed.selected); // newly selected
console.log(data.changed.deselected); // newly deselected
})
.jstree({
"plugins" : [ "changed" ]
});
});
3.2.checked plugin(復(fù)選框)
這個插件將會在每個節(jié)點前面渲染復(fù)選框的圖標(biāo)，使得多選變得更加容易。
它也支持三態(tài)，意味著一個節(jié)點有些子節(jié)點是選中，這個節(jié)點將會被渲染成未確定，這個狀態(tài)可以傳播。你可以通過級聯(lián)配置選項來微調(diào)級聯(lián)選項。
記住級聯(lián)會復(fù)選框會檢查所有節(jié)點，即使是不可用的節(jié)點。
不確定狀態(tài)是一個自動計算的，但是如果你是使用AJAX加載形成樹想要渲染一個節(jié)點作為不確定狀態(tài)通過設(shè)置屬性“undetermined”:true。
你可以在API找到所有配置復(fù)選框的選項https://www.jstree.com/api/#/?q=$.jstree.defaults.checkbox
$(function () {
$("#plugins1").jstree({
"checkbox" : {
"keep_selected_style" : false
},
"plugins" : [ "checkbox" ]
});
});
3.3 conditionalselect plugin(條件插件)
這個插件重寫了activate_node函數(shù)（就是用戶選擇節(jié)點將會調(diào)用的函數(shù)），你可以通過回調(diào)避免這個函數(shù)被調(diào)用。
$(function () {
$("#plugins10").jstree({
"conditionalselect" : function (node, event) {
return false;
},
"plugins" : [ "conditionalselect" ]
});
});
3.4(Contextmenu plugin)上下文菜單插件
這插件就是你在一個節(jié)點上右鍵會彈出一個功能列表菜單。
你可以通過API找所有contextmenu插件的配置選項：點擊打開鏈接
$(function () {
$("#plugins2").jstree({
"core" : {
// so that create works
"check_callback" : true
},
"plugins" : [ "contextmenu" ]
});
});
3.5 (drag&drop)拖拽插件
這個插件可以通過拖拽來重新改變樹的結(jié)構(gòu)。
你可以通過API找到更多的配置選項：點擊打開鏈接
3.6.Massloadplugin(慣性負(fù)載插件)
這個插件通過一次請求（使用的是延遲加載）加載節(jié)點
你可以通過API找到更多的配置選項：點擊打開鏈接
$(function () {
$("#plugins10").jstree({
"core" : {
"data" : { .. AJAX config .. }
},
"massload" : {
"url" : "/some/path",
"data" : function (nodes) {
return { "ids" : nodes.join(",") };
}
}
"plugins" : [ "massload", "state" ]
});
});
3.7.(search plugin) 搜索插件
這個插件可以在一棵樹搜索對應(yīng)的條目。
你可以通過API找到更多的配置選項：點擊打開鏈接
$("#plugins4").jstree({
"plugins" : [ "search" ]
});
var to = false;
$('#plugins4_q').keyup(function () {
if(to) { clearTimeout(to); }
to = setTimeout(function () {
var v = $('#plugins4_q').val();
$('#plugins4').jstree(true).search(v);
}, 250);
});
});
3.8. sort plugin(排序插件)
這個插件可以重新對于同一級的條目進行排序，默認(rèn)采用數(shù)字或26字母的順序，你可以通過配置對比函數(shù)：點擊打開鏈接
$(function () {
$("#plugins5").jstree({
"plugins" : [ "sort" ]
});
});
3.9.state plugin(狀態(tài)插件)
這個插件保存所有打開和選中的節(jié)點到用戶瀏覽器中，所以當(dāng)再次返回相同的樹，先前的狀態(tài)將會被恢復(fù)
你可以通過API獲取更多狀態(tài)插件的配置選項：點擊打開鏈接，你可以通過選中一個節(jié)點，然后刷新該頁面就可以看到變化。
$(function () {
$("#plugins6").jstree({
"state" : { "key" : "demo2" },
"plugins" : [ "state" ]
});
});
3.10. types plugin(類型插件)
這個插件為一組節(jié)點預(yù)先定義類型，這就意味著為每個組很容易控制內(nèi)部規(guī)則和圖標(biāo)。
為了設(shè)置節(jié)點類型，你可以使用set_type 或者在data中提供一個type屬性
你可以通過API獲取更多關(guān)于類型插件的配置選項和函數(shù)：點擊打開鏈接
$(function () {
$("#plugins7").jstree({
"types" : {
"default" : {
"icon" : "glyphicon glyphicon-flash"
},
"demo" : {
"icon" : "glyphicon glyphicon-ok"
}
},
"plugins" : [ "types" ]
});
})
3.11. unique plugin(唯一插件)
同一層級的條目不能出現(xiàn)相同的名稱。這個插件沒有選項，它只是避免在同一節(jié)點的重命名和移動其它節(jié)點時出現(xiàn)相同的名稱。
$(function () {
$("#plugins8").jstree({
"core" : {
"check_callback" : true
},
"plugins" : [ "unique", "dnd" ]
});
});
3.12 wholerow plugin (整行插件)
這個插件就是一個條目占滿一行，方便選擇，如果是一個很大的樹它可能會導(dǎo)致在老的瀏覽器變慢。
$(function () {
$("#plugins9").jstree({
"plugins" : [ "wholerow" ]
});
});
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 基于jstree使用AJAX請求獲取數(shù)據(jù)形成樹
- 基于jstree使用JSON數(shù)據(jù)組裝成樹
- jstree創(chuàng)建無限分級樹的方法【基于ajax動態(tài)創(chuàng)建子節(jié)點】
- 基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【二】列表分頁處理和插件JSTree的使用
- jsTree 基于JQuery的排序節(jié)點 Bug
- jquery下jstree簡單應(yīng)用 - v1.0
- jquery.jstree 增加節(jié)點的雙擊事件代碼
- 基于jsTree的無限級樹JSON數(shù)據(jù)的轉(zhuǎn)換代碼
- JQery jstree 大數(shù)據(jù)量問題解決方法
- jsTree樹控件(基于jQuery, 超強悍)[推薦]
相關(guān)文章
js 定義對象數(shù)組(結(jié)合)多維數(shù)組方法
下面小編就為大家?guī)硪黄猨s 定義對象數(shù)組(結(jié)合)多維數(shù)組方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
js replace(a,b)之替換字符串中所有指定字符的方法
下面小編就為大家?guī)硪黄猨s replace(a,b)之替換字符串中所有指定字符的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要給大家介紹了關(guān)于JavaScript中變量提升和函數(shù)提升的相關(guān)資料,以及JS變量提升和函數(shù)提升的順序,文中給出了詳細(xì)的介紹,需要的朋友可以參考下2021-07-07
Dron右鍵菜單 v1.0...2006-10-10
這篇文章主要介紹了ZK中使用JS讀取客戶端txt文件內(nèi)容問題,本文通過實例圖文相結(jié)合給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
uniapp添加操作日志的方法(uniapp、日志、文件、html5+)
近期一直在寫微信小程序,有一個問題一直沒有解決,就是在測試環(huán)境中調(diào)試代碼會打印很多日志,方便看到問題所在,這篇文章主要給大家介紹了關(guān)于uniapp添加操作日志(uniapp、日志、文件、html5+)的相關(guān)資料,需要的朋友可以參考下2023-11-11
2008-02-02
js前端技巧之圖片格式轉(zhuǎn)換(File、Blob、base64)
這篇文章主要給大家介紹了關(guān)于js前端技巧之圖片格式轉(zhuǎn)換(File、Blob、base64)的相關(guān)資料,主要記錄一下比較常見的圖片格式（File、Blob、base64）在不同的場景他們之間的相互轉(zhuǎn)換的方法,需要的朋友可以參考下2023-04-04
電影院選座基本上每個人都用到過，本文主要介紹了JS實現(xiàn)電影票選座的項目示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
下面小編就為大家?guī)硪黄猨s判斷是否為空和typeof的用法(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10