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+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 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
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php include的妙用,实现路径加密
2008/07/29 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
php中memcache 基本操作实例
2015/05/17 PHP
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
Python用GET方法上传文件
2015/03/10 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
sklearn的predict_proba使用说明
2020/06/28 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
管理专员自荐信
2014/01/26 职场文书
医学生自我评价
2014/01/27 职场文书
北京大学自荐信范文
2014/01/28 职场文书
单位工作证明书格式
2014/10/04 职场文书
农业生产宣传标语
2014/10/08 职场文书
教师工作态度自我评价
2015/03/05 职场文书
小学运动会加油词
2015/07/18 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
Redis性能监控的实现
2021/07/09 Redis
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电