转载自:http://www.cnblogs.com/coolcode/archive/2010/07/26/jstree_add_event_for_node_dblclick.html
jquery.jstree 增加节点的双击事件
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"));
})
其实我认为它更像是节点的单击事件,因为每次点节点的时候它都会触发,不管之前该节点是否已经被选中。
近日做个文件管理的东东,需要用到节点的双击事件,如双击某个节点打开该节点的编辑页面。
image
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"));
})
此外:以上只是实现了双击事件,我们在以上基础上添加展开和关闭事件
$.jstree.plugin("core", {…………………………
_fn : {
init : function () { (1)在此处加入代码var $jstree = this;
(2)将var trgt = $(event.target).parent().find('ins').get(0);
$jstree.toggle_node(trgt);加入到.bind("dblclick.jstree", function (event) { //为树节点添加双击事件
OK!
分享到:
相关推荐
本文基于 jsTree 1.0-rc1 版本增加节点的双击事件。
vue-tree A Vue.js project Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 1.总体预览 2.编辑 ...
1、可自识别区域,【右键单击】选中...7、自定义截图区域内,【左键双击】,可保存截图到剪切板,以便粘贴到其他处 8、鼠标移动,可实现【放大镜】显示当前鼠标位置 9、【关闭】可点击工具栏【关闭按钮】,或者【esc】
2.标签新增双击关闭当前标签功能。 3.标签新增右键功能。 4.新增js功能。 详细可查看【frame/static/js】文件夹内的js vip_nav.js 【主页菜单js】 具体功能: 1) main方法 main(请求地址,过滤ID,是否展开,携带...
-为TreeNode增加AutoPostBack属性,增加事件数据类TreeCheckEventArgs,为Tree增加事件NodeCheck。 -示例在:http://extasp.net/data/tree_run.aspx -Grid增加GetNoSelectionAlertInParentReference函数,用来...
-为TreeNode增加AutoPostBack属性,增加事件数据类TreeCheckEventArgs,为Tree增加事件NodeCheck。 -示例在:http://extasp.net/data/tree_run.aspx -Grid增加GetNoSelectionAlertInParentReference函数,用来...
第15课(继续讲解tree的使用,介绍tree需要的JSON格式、常用事件和方法,结合tabs的使用等) 第16课(tree数据载入后自动选中想要选择的节点、tree的iconCls需要注意的地方、js中不可以用search当function名称、combo...
详细演示了HtmlView的使用与HtmlView事件站点拦截的实现、js调用。 CIVStringSet_Demo 自定义了一个类似STL容器的类,并进行了测试。 ClearHistory 实现了 清楚internet临时文件、Cookie的清除、游览器地址栏历史...
详细演示了HtmlView的使用与HtmlView事件站点拦截的实现、js调用。 CIVStringSet_Demo 自定义了一个类似STL容器的类,并进行了测试。 ClearHistory 实现了 清楚internet临时文件、Cookie的清除、游览器地址栏历史...
详细演示了HtmlView的使用与HtmlView事件站点拦截的实现、js调用。 CIVStringSet_Demo 自定义了一个类似STL容器的类,并进行了测试。 ClearHistory 实现了 清楚internet临时文件、Cookie的清除、游览器地址栏历史...
详细演示了HtmlView的使用与HtmlView事件站点拦截的实现、js调用。 CIVStringSet_Demo 自定义了一个类似STL容器的类,并进行了测试。 ClearHistory 实现了 清楚internet临时文件、Cookie的清除、游览器地址栏历史...
对网上d3树的整理 对d3中单节点单击和双击事件 互不影响的处理 (此资源需要在服务器上才能测试允许 因为代码中对json数据模拟真实情况进行请求的)
详细演示了HtmlView的使用与HtmlView事件站点拦截的实现、js调用。 CIVStringSet_Demo 自定义了一个类似STL容器的类,并进行了测试。 ClearHistory 实现了 清楚internet临时文件、Cookie的清除、游览器地址栏历史...
第15课(继续讲解tree的使用,介绍tree需要的JSON格式、常用事件和方法,结合tabs的使用等) 第16课(tree数据载入后自动选中想要选择的节点、tree的iconCls需要注意的地方、js中不可以用search当function名称、combo...
详细演示了HtmlView的使用与HtmlView事件站点拦截的实现、js调用。 CIVStringSet_Demo 自定义了一个类似STL容器的类,并进行了测试。 ClearHistory 实现了 清楚internet临时文件、Cookie的清除、游览器地址栏历史...
第15课(继续讲解tree的使用,介绍tree需要的JSON格式、常用事件和方法,结合tabs的使用等) 第16课(tree数据载入后自动选中想要选择的节点、tree的iconCls需要注意的地方、js中不可以用search当function名称、combo...
特征双击节点将其转换为文件夹甚至在两个不同级别之间拖放树节点自定义您的节点(如何显示节点。例如:节点名称和左侧图标) 控制是否可以拖动特定节点以及是否可以将该节点插入其他节点附加/删除任何级别的节点(#...
利用反射实现ASP.NET控件和数据实体之间的双向绑定,并且在客户端自动验证输入的内容是否合法 asp.net报表解决方法 SQLDMO类的使用 SQL过程自动C#封装,支持从表到基本存储过程生成 使用SQLDMO控制 SQL Server 使用SQL...
渲染的图形是可滚动、可缩放、视网膜就绪、动态的,并在双击时切换布局。 由于 vis.js 的命令性质,更新图形属性会导致图形的完全重绘并将其完全移植到 React 本身就是一个大项目! 该组件将三个 vis.js 配置对象...