本文為大家分享了jsTree事件和交互以及插件plugins，供大家參考，具體內(nèi)容如下

1、事件

jsTree在容器中觸發(fā)變量事件，你可以瀏覽所有事件，然后了解如何進(jìn)行監(jiān)聽(tīng)：https://www.jstree.com/api/#/?q=.jstree%20Event

通過(guò)data參數(shù)獲取更多詳細(xì)信息關(guān)于事件檢查。

更多情況下就是你會(huì)得到所有節(jié)點(diǎn)對(duì)象，如果你通過(guò)ID獲取這個(gè)節(jié)點(diǎn)，查看節(jié)點(diǎn)使用.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.交互

為了在一個(gè)實(shí)例中調(diào)用一個(gè)方法，你必須要獲取實(shí)例引用然后調(diào)用方法，這個(gè)例子展示如何獲取一個(gè)引用然后調(diào)取一個(gè)方法。

可以查看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有些功能被移除核心，只有你需要的時(shí)候才使用它，為了確保使用插件，需要使用plugins參數(shù)配置選項(xiàng)，將插件名稱添加到一個(gè)數(shù)組中。

舉個(gè)例子確保所有插件都可以使用：（只要設(shè)置你需要使用的插件）

"plugins" : [ 
 "checkbox", 
 "contextmenu", 
 "dnd", 
 "massload", 
 "search", 
 "sort", 
 "state", 
 "types", 
 "unique", 
 "wholerow", 
 "changed", 
 "conditionalselect" 
] 

這里有快速預(yù)覽每一個(gè)插件

3.1、changed plugin (改變插件)

這個(gè)插件添加關(guān)于選擇改變的額外的信息，一旦包含plugins配置選項(xiàng)，每個(gè)changed.jstree事件數(shù)據(jù)將會(huì)包含一個(gè)新的屬性名稱為changed,它將給出最后關(guān)于seleted和deselected節(jié)點(diǎn)的事件（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ù)選框)

這個(gè)插件將會(huì)在每個(gè)節(jié)點(diǎn)前面渲染復(fù)選框的圖標(biāo)，使得多選變得更加容易。

它也支持三態(tài)，意味著一個(gè)節(jié)點(diǎn)有些子節(jié)點(diǎn)是選中，這個(gè)節(jié)點(diǎn)將會(huì)被渲染成未確定，這個(gè)狀態(tài)可以傳播。你可以通過(guò)級(jí)聯(lián)配置選項(xiàng)來(lái)微調(diào)級(jí)聯(lián)選項(xiàng)。

記住級(jí)聯(lián)會(huì)復(fù)選框會(huì)檢查所有節(jié)點(diǎn)，即使是不可用的節(jié)點(diǎn)。

不確定狀態(tài)是一個(gè)自動(dòng)計(jì)算的，但是如果你是使用AJAX加載形成樹(shù)想要渲染一個(gè)節(jié)點(diǎn)作為不確定狀態(tài)通過(guò)設(shè)置屬性“undetermined”:true。

你可以在API找到所有配置復(fù)選框的選項(xiàng)https://www.jstree.com/api/#/?q=$.jstree.defaults.checkbox

$(function () { 
 $("#plugins1").jstree({ 
 "checkbox" : { 
 "keep_selected_style" : false 
 }, 
 "plugins" : [ "checkbox" ] 
 }); 
}); 

3.3 conditionalselect plugin(條件插件)

這個(gè)插件重寫了activate_node函數(shù)（就是用戶選擇節(jié)點(diǎn)將會(huì)調(diào)用的函數(shù)），你可以通過(guò)回調(diào)避免這個(gè)函數(shù)被調(diào)用。

$(function () { 
 $("#plugins10").jstree({ 
 "conditionalselect" : function (node, event) { 
 return false; 
 }, 
 "plugins" : [ "conditionalselect" ] 
 }); 
}); 

3.4(Contextmenu plugin)上下文菜單插件
這插件就是你在一個(gè)節(jié)點(diǎn)上右鍵會(huì)彈出一個(gè)功能列表菜單。
你可以通過(guò)API找所有contextmenu插件的配置選項(xiàng)：點(diǎn)擊打開(kāi)鏈接

$(function () { 
 $("#plugins2").jstree({ 
 "core" : { 
 // so that create works 
 "check_callback" : true 
 }, 
 "plugins" : [ "contextmenu" ] 
 }); 
}); 

3.5 (drag&drop)拖拽插件

這個(gè)插件可以通過(guò)拖拽來(lái)重新改變樹(shù)的結(jié)構(gòu)。
你可以通過(guò)API找到更多的配置選項(xiàng)：點(diǎn)擊打開(kāi)鏈接

3.6.Massloadplugin(慣性負(fù)載插件)
這個(gè)插件通過(guò)一次請(qǐng)求（使用的是延遲加載）加載節(jié)點(diǎn)
你可以通過(guò)API找到更多的配置選項(xiàng)：點(diǎn)擊打開(kāi)鏈接

$(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) 搜索插件
這個(gè)插件可以在一棵樹(shù)搜索對(duì)應(yīng)的條目。
你可以通過(guò)API找到更多的配置選項(xiàng)：點(diǎn)擊打開(kāi)鏈接

 $("#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(排序插件)

這個(gè)插件可以重新對(duì)于同一級(jí)的條目進(jìn)行排序，默認(rèn)采用數(shù)字或26字母的順序，你可以通過(guò)配置對(duì)比函數(shù)：點(diǎn)擊打開(kāi)鏈接

$(function () { 
 $("#plugins5").jstree({ 
 "plugins" : [ "sort" ] 
 }); 
}); 

3.9.state plugin(狀態(tài)插件)

這個(gè)插件保存所有打開(kāi)和選中的節(jié)點(diǎn)到用戶瀏覽器中，所以當(dāng)再次返回相同的樹(shù)，先前的狀態(tài)將會(huì)被恢復(fù)
你可以通過(guò)API獲取更多狀態(tài)插件的配置選項(xiàng)：點(diǎn)擊打開(kāi)鏈接，你可以通過(guò)選中一個(gè)節(jié)點(diǎn)，然后刷新該頁(yè)面就可以看到變化。

$(function () { 
 $("#plugins6").jstree({ 
 "state" : { "key" : "demo2" }, 
 "plugins" : [ "state" ] 
 }); 
}); 

3.10. types plugin(類型插件)

這個(gè)插件為一組節(jié)點(diǎn)預(yù)先定義類型，這就意味著為每個(gè)組很容易控制內(nèi)部規(guī)則和圖標(biāo)。
為了設(shè)置節(jié)點(diǎn)類型，你可以使用set_type 或者在data中提供一個(gè)type屬性
你可以通過(guò)API獲取更多關(guān)于類型插件的配置選項(xiàng)和函數(shù)：點(diǎn)擊打開(kāi)鏈接

$(function () { 
 $("#plugins7").jstree({ 
 "types" : { 
 "default" : { 
 "icon" : "glyphicon glyphicon-flash" 
 }, 
 "demo" : { 
 "icon" : "glyphicon glyphicon-ok" 
 } 
 }, 
 "plugins" : [ "types" ] 
 }); 
}) 

3.11. unique plugin(唯一插件)
同一層級(jí)的條目不能出現(xiàn)相同的名稱。這個(gè)插件沒(méi)有選項(xiàng)，它只是避免在同一節(jié)點(diǎn)的重命名和移動(dòng)其它節(jié)點(diǎn)時(shí)出現(xiàn)相同的名稱。

$(function () { 
 $("#plugins8").jstree({ 
 "core" : { 
 "check_callback" : true 
 }, 
 "plugins" : [ "unique", "dnd" ] 
 }); 
}); 

3.12 wholerow plugin (整行插件)
這個(gè)插件就是一個(gè)條目占滿一行，方便選擇，如果是一個(gè)很大的樹(shù)它可能會(huì)導(dǎo)致在老的瀏覽器變慢。

$(function () { 
 $("#plugins9").jstree({ 
 "plugins" : [ "wholerow" ] 
 }); 
}); 

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論