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实现切换标签页效果实例代码
Nov 01 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
vue.js的提示组件
Mar 02 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
基于better-scroll 实现歌词联动功能的代码
May 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
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
python获取元素在数组中索引号的方法
2015/07/15 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
幼师自荐信范文
2013/10/06 职场文书
21岁生日感言
2014/02/27 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
公务员群众路线心得体会
2014/11/03 职场文书