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 相关文章推荐
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
jquery退出each循环的写法
Feb 26 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 Javascript
实例讲解React 组件
Jul 07 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
Python中的面向对象编程详解(上)
2015/04/13 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
python实现Windows电脑定时关机
2018/06/20 Python
python版百度语音识别功能
2019/07/09 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
阿里旅行:飞猪
2017/01/05 全球购物
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
.NET程序员的几道面试题
2012/06/01 面试题
党政领导班子民主生活会整改措施
2014/09/18 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏