jquery.jstree 增加节点的双击事件

news/2024/7/11 0:45:42 标签: jquery, function, callback, cookies, 扩展, 编程
jstree 本文基于 jsTree 1.0-rc1 版本增加节点的双击事件。 jsTree 是基于jquery的树插件,支持拖放、复制、删除、快捷键、多

jstree

本文基于 jsTree 1.0-rc1 版本增加节点的双击事件。

jsTree 是基于jquery的树插件,支持拖放、复制、删除、快捷键、多选、自定义节点图标、自定义右键菜单、跨页面保存状态等等,总之我想到的它基本上都有了,而且最值得表扬的是它让人感觉一点都不慢哦。

jsTree有节点选择事件,即

.bind("select_node.jstree", function(e, data) {             //alert(data.rslt.obj.attr("id") + ":" + data.rslt.obj.attr("rel"));        })

其实我认为它更像是节点的单击事件,因为每次点节点的时候它都会触发,不管之前该节点是否已经被选中。

近日做个文件管理的东东,需要用到节点的双击事件,如双击某个节点打开该节点的编辑页面。

jstree虽然有双击事件,但是并非针对节点的,而是你双击树所在区域就会触发,如上图任何一个地方。

离节点双击事件最接近的应该就是节点选择事件,因此又是“照葫芦画瓢”啦。

分析

在第833行 this.get_container() 后是节点的单击事件

.delegate("a", "click.jstree", $.proxy(function (event) {                        event.preventDefault();                        this.select_node(event.currentTarget, true, event);                    }, this))

同样我再这里插入节点双击事件

.delegate("a", "dblclick.jstree", $.proxy(function(event) {    event.preventDefault();    this.dblclick_node(event.currentTarget, true, event);    }, this))

接着,我再实现 dblclick_node 方法就可以了。

在第928行找到 select_node 的代码,比较复杂。但里面90%对于双击来说是没有用处的,如处理单选、多选、保存选择结果到cookies等。因此 dblclick_node 方法的实现要比 select_node 简单很多。

dblclick_node: function(obj, check, e) {    obj = this._get_node(obj);    if (obj == -1 || !obj || !obj.length) { return false; }     this.__callback({ "obj": obj }); },

OK,就这样了。

使用例子

跟 select_node 用法一样

.bind("dblclick_node.jstree", function(e, data) {             //alert(data.rslt.obj.attr("id") + ":" + data.rslt.obj.attr("rel"));        })

改造后的代码下载

jquery.jstree.js

顺便说说

jstree 跟另一个插件jquery validate 是水火不容的,当两者共存时,jstree虽然也可以构造树出来,但如僵尸一般不能展开。这里mark一个,日后试试能否修改。


作者:Bruce(编程的艺术世界)
出处:http://coolcode.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

Tag标签: jquery,jstree,扩展,节点双击事件CoolCode

 

关键字: jQuery 扩展 jstree 节点双击事件

http://www.niftyadmin.cn/n/1049875.html

相关文章

一步完成MySQL向Redis迁移

2019独角兽企业重金招聘Python工程师标准>>> 在把一个大表从 MySQL 迁移到 Redis 时,你可能会发现,每次提取、转换、导入一条数据是让人难以忍受的慢!这里有一个技巧,你可以通过使用管道把 MySQL 的输出直接输入到 red…

Spring中同时使用多个数据库

Spring中同时使用多个数据库部署状态下定义多个数据库是没有任何问题的,此时的Spring容器对各个Bean组件的依赖注射过程默认是按"名字"进行查找 (autowire"byName")满足,只要为不同的数据库(dataSource)起不同的名字,在各个DAO Bean中按名字标识数据库满足…

【培训题】唯一分解定理应用[1] P1945

Description 质因子分解是数论中一个基本定理,见P1128。现在请你利用这个基本定理,对给定整数n,完成下列三个任务: 任务1、计算n的因数个数并由小到大输出这些因数; 任务2、计算n的因数和; 任务3、计算1,2,…

HttpClient抓取网页内容简单介绍

版本HttpClient3.1 1、GET方式 第一步、创建一个客户端,类似于你用浏览器打开一个网页 HttpClient httpClient new HttpClient(); 第二步、创建一个GET方法,用来获取到你需要抓取的网页URL GetMethod getMethod new GetMethod("http://www.baidu.…

Java:集合类性能分析

1.Java 集合框架图 <!--[if !vml]-->http://zhangjunhd.blog.51cto.com/attachment/200804/200804021207149354497.jpg <!--[endif]-->-集合接口&#xff1a;6个接口&#xff08;短虚线表示&#xff09;&#xff0c;表示不同集合类型&#xff0c;是集合框架的基础…

登录验证码

后台》防灌水》验证设置转载于:https://www.cnblogs.com/alibabaidu/p/3525072.html

redis源码阅读

服务器启动过程1、初始化服务器状态结构在启动服务器时&#xff0c;设置服务器运行ID、默认运行频率、默认配置文件路径、默认端口号等属性。initServerConfig(); 2、载入配置选项在启动服务器时&#xff0c;用户可以通过命令行给定配置参数或指定配置文件来修改服务器的默认配…

解决Windows8系统磁盘占用太多100%或99%

关闭家庭组功能&#xff1a;WINR运行Services.msc&#xff0c;找到 HomeGroup Listener 和 HomeGroup Provider 服务&#xff0c;分别停止和禁用这2个服务。然后重新启动Windows 8&#xff0c;看看磁盘占用是不是正常了。 解决方法2&#xff1a;打开网络和共享中心 → 更改适配…