jsTree事件和交互以及插件plugins詳解
本文為大家分享了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í)有所幫助,也希望大家多多支持腳本之家。
- 基于jstree使用AJAX請(qǐng)求獲取數(shù)據(jù)形成樹(shù)
- 基于jstree使用JSON數(shù)據(jù)組裝成樹(shù)
- jstree創(chuàng)建無(wú)限分級(jí)樹(shù)的方法【基于ajax動(dòng)態(tài)創(chuàng)建子節(jié)點(diǎn)】
- 基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【二】列表分頁(yè)處理和插件JSTree的使用
- jsTree 基于JQuery的排序節(jié)點(diǎn) Bug
- jquery下jstree簡(jiǎn)單應(yīng)用 - v1.0
- jquery.jstree 增加節(jié)點(diǎn)的雙擊事件代碼
- 基于jsTree的無(wú)限級(jí)樹(shù)JSON數(shù)據(jù)的轉(zhuǎn)換代碼
- JQery jstree 大數(shù)據(jù)量問(wèn)題解決方法
- jsTree樹(shù)控件(基于jQuery, 超強(qiáng)悍)[推薦]
相關(guān)文章
js 定義對(duì)象數(shù)組(結(jié)合)多維數(shù)組方法
下面小編就為大家?guī)?lái)一篇js 定義對(duì)象數(shù)組(結(jié)合)多維數(shù)組方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07js replace(a,b)之替換字符串中所有指定字符的方法
下面小編就為大家?guī)?lái)一篇js replace(a,b)之替換字符串中所有指定字符的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08JavaScript中變量提升和函數(shù)提升實(shí)例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中變量提升和函數(shù)提升的相關(guān)資料,以及JS變量提升和函數(shù)提升的順序,文中給出了詳細(xì)的介紹,需要的朋友可以參考下2021-07-07ZK中使用JS讀取客戶端txt文件內(nèi)容問(wèn)題
這篇文章主要介紹了ZK中使用JS讀取客戶端txt文件內(nèi)容問(wèn)題,本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11uniapp添加操作日志的方法(uniapp、日志、文件、html5+)
近期一直在寫微信小程序,有一個(gè)問(wèn)題一直沒(méi)有解決,就是在測(cè)試環(huán)境中調(diào)試代碼會(huì)打印很多日志,方便看到問(wèn)題所在,這篇文章主要給大家介紹了關(guān)于uniapp添加操作日志(uniapp、日志、文件、html5+)的相關(guān)資料,需要的朋友可以參考下2023-11-11js前端技巧之圖片格式轉(zhuǎn)換(File、Blob、base64)
這篇文章主要給大家介紹了關(guān)于js前端技巧之圖片格式轉(zhuǎn)換(File、Blob、base64)的相關(guān)資料,主要記錄一下比較常見(jiàn)的圖片格式(File、Blob、base64)在不同的場(chǎng)景他們之間的相互轉(zhuǎn)換的方法,需要的朋友可以參考下2023-04-04JS實(shí)現(xiàn)電影票選座的項(xiàng)目示例
電影院選座基本上每個(gè)人都用到過(guò),本文主要介紹了JS實(shí)現(xiàn)電影票選座的項(xiàng)目示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04