溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文為大家分享了jsTree事件和交互以及插件plugins，供大家參考，具體內容如下
1、事件
jsTree在容器中觸發變量事件，你可以瀏覽所有事件，然后了解如何進行監聽：https://www.jstree.com/api/#/?q=.jstree%20Event
通過data參數獲取更多詳細信息關于事件檢查。
更多情況下就是你會得到所有節點對象，如果你通過ID獲取這個節點，查看節點使用.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.交互
為了在一個實例中調用一個方法，你必須要獲取實例引用然后調用方法，這個例子展示如何獲取一個引用然后調取一個方法。
可以查看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參數配置選項，將插件名稱添加到一個數組中。
舉個例子確保所有插件都可以使用：（只要設置你需要使用的插件）
"plugins" : [ "checkbox", "contextmenu", "dnd", "massload", "search", "sort", "state", "types", "unique", "wholerow", "changed", "conditionalselect" ]
這里有快速預覽每一個插件
3.1、changed plugin (改變插件)
這個插件添加關于選擇改變的額外的信息，一旦包含plugins配置選項，每個changed.jstree事件數據將會包含一個新的屬性名稱為changed,它將給出最后關于seleted和deselected節點的事件（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(復選框)
這個插件將會在每個節點前面渲染復選框的圖標，使得多選變得更加容易。
它也支持三態，意味著一個節點有些子節點是選中，這個節點將會被渲染成未確定，這個狀態可以傳播。你可以通過級聯配置選項來微調級聯選項。
記住級聯會復選框會檢查所有節點，即使是不可用的節點。
不確定狀態是一個自動計算的，但是如果你是使用AJAX加載形成樹想要渲染一個節點作為不確定狀態通過設置屬性“undetermined”:true。
你可以在API找到所有配置復選框的選項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函數（就是用戶選擇節點將會調用的函數），你可以通過回調避免這個函數被調用。
$(function () {
$("#plugins10").jstree({
"conditionalselect" : function (node, event) {
return false;
},
"plugins" : [ "conditionalselect" ]
});
});
3.4(Contextmenu plugin)上下文菜單插件
這插件就是你在一個節點上右鍵會彈出一個功能列表菜單。
你可以通過API找所有contextmenu插件的配置選項：點擊打開鏈接
$(function () {
$("#plugins2").jstree({
"core" : {
// so that create works
"check_callback" : true
},
"plugins" : [ "contextmenu" ]
});
});
3.5 (drag&drop)拖拽插件
這個插件可以通過拖拽來重新改變樹的結構。
你可以通過API找到更多的配置選項：點擊打開鏈接
3.6.Massloadplugin(慣性負載插件)
這個插件通過一次請求（使用的是延遲加載）加載節點
你可以通過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) 搜索插件
這個插件可以在一棵樹搜索對應的條目。
你可以通過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(排序插件)
這個插件可以重新對于同一級的條目進行排序，默認采用數字或26字母的順序，你可以通過配置對比函數：點擊打開鏈接
$(function () {
$("#plugins5").jstree({
"plugins" : [ "sort" ]
});
});
3.9.state plugin(狀態插件)
這個插件保存所有打開和選中的節點到用戶瀏覽器中，所以當再次返回相同的樹，先前的狀態將會被恢復
你可以通過API獲取更多狀態插件的配置選項：點擊打開鏈接，你可以通過選中一個節點，然后刷新該頁面就可以看到變化。
$(function () {
$("#plugins6").jstree({
"state" : { "key" : "demo2" },
"plugins" : [ "state" ]
});
});
3.10. types plugin(類型插件)
這個插件為一組節點預先定義類型，這就意味著為每個組很容易控制內部規則和圖標。
為了設置節點類型，你可以使用set_type 或者在data中提供一個type屬性
你可以通過API獲取更多關于類型插件的配置選項和函數：點擊打開鏈接
$(function () {
$("#plugins7").jstree({
"types" : {
"default" : {
"icon" : "glyphicon glyphicon-flash"
},
"demo" : {
"icon" : "glyphicon glyphicon-ok"
}
},
"plugins" : [ "types" ]
});
})
3.11. unique plugin(唯一插件)
同一層級的條目不能出現相同的名稱。這個插件沒有選項，它只是避免在同一節點的重命名和移動其它節點時出現相同的名稱。
$(function () {
$("#plugins8").jstree({
"core" : {
"check_callback" : true
},
"plugins" : [ "unique", "dnd" ]
});
});
3.12 wholerow plugin (整行插件)
這個插件就是一個條目占滿一行，方便選擇，如果是一個很大的樹它可能會導致在老的瀏覽器變慢。
$(function () {
$("#plugins9").jstree({
"plugins" : [ "wholerow" ]
});
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
