jsTree事件和交互以及插件plugins详解


Posted in Javascript onAugust 29, 2017

本文为大家分享了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();

jsTree事件和交互以及插件plugins详解

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');

jsTree事件和交互以及插件plugins详解

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" ] 
 }); 
});

jsTree事件和交互以及插件plugins详解

3.3 conditionalselect plugin(条件插件)

这个插件重写了activate_node函数(就是用户选择节点将会调用的函数),你可以通过回调避免这个函数被调用。

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

jsTree事件和交互以及插件plugins详解

3.4(Contextmenu plugin)上下文菜单插件
这插件就是你在一个节点上右键会弹出一个功能列表菜单。
你可以通过API找所有contextmenu插件的配置选项:点击打开链接

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

jsTree事件和交互以及插件plugins详解

3.5 (drag&drop)拖拽插件

这个插件可以通过拖拽来重新改变树的结构。
你可以通过API找到更多的配置选项:点击打开链接

jsTree事件和交互以及插件plugins详解

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); 
 }); 
});

jsTree事件和交互以及插件plugins详解

3.8. sort plugin(排序插件)

这个插件可以重新对于同一级的条目进行排序,默认采用数字或26字母的顺序,你可以通过配置对比函数:点击打开链接

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

jsTree事件和交互以及插件plugins详解

3.9.state plugin(状态插件)

这个插件保存所有打开和选中的节点到用户浏览器中,所以当再次返回相同的树,先前的状态将会被恢复
你可以通过API获取更多状态插件的配置选项:点击打开链接,你可以通过选中一个节点,然后刷新该页面就可以看到变化。

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

jsTree事件和交互以及插件plugins详解

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" ] 
 }); 
})

jsTree事件和交互以及插件plugins详解

3.11. unique plugin(唯一插件)
同一层级的条目不能出现相同的名称。这个插件没有选项,它只是避免在同一节点的重命名和移动其它节点时出现相同的名称。

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

jsTree事件和交互以及插件plugins详解

3.12 wholerow plugin (整行插件)
这个插件就是一个条目占满一行,方便选择,如果是一个很大的树它可能会导致在老的浏览器变慢。

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

jsTree事件和交互以及插件plugins详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用js获取图片原始尺寸
Dec 03 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
javascript实现放大镜功能
Dec 09 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 #Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 #Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 #jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 #jQuery
Vue2.0权限树组件实现代码
Aug 29 #Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 #Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 #jQuery
You might like
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
Seajs源码详解分析
2019/04/02 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
python自动化生成IOS的图标
2018/11/13 Python
python实现多层感知器
2019/01/18 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
零基础学python应该从哪里入手
2020/08/11 Python
Spy++的使用方法及下载教程
2021/01/29 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
幼儿运动会邀请函
2014/01/17 职场文书
上班打牌检讨书
2014/02/07 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
给领导的感谢信范文
2015/01/23 职场文书
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫