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

1、事件

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

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

更多情況下就是你會(huì)得到所有節(jié)點(diǎn)對(duì)象，如果你通過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)可以傳播。你可以通過級(jí)聯(lián)配置選項(xiàng)來微調(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加載形成樹想要渲染一個(gè)節(jié)點(diǎn)作為不確定狀態(tài)通過設(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ù)），你可以通過回調(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è)功能列表菜單。
你可以通過API找所有contextmenu插件的配置選項(xiàng)：點(diǎn)擊打開鏈接

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

3.5 (drag&drop)拖拽插件

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

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

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

 $("#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字母的順序，你可以通過配置對(duì)比函數(shù)：點(diǎn)擊打開鏈接

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

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

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

$(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屬性
你可以通過API獲取更多關(guān)于類型插件的配置選項(xiàng)和函數(shù)：點(diǎn)擊打開鏈接

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

3.11. unique plugin(唯一插件)
同一層級(jí)的條目不能出現(xiàn)相同的名稱。這個(gè)插件沒有選項(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è)很大的樹它可能會(huì)導(dǎo)致在老的瀏覽器變慢。

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。