好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

jquery.jstree 使用

jquery.jstree 使用

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"));
         })

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

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

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一个,日后试试能否修改。

转载: http://HdhCmsTestcnblogs测试数据/coolcode/archive/2010/07/26/jstree_add_event_for_node_dblclick.html

作者: Leo_wl

    

出处: http://HdhCmsTestcnblogs测试数据/Leo_wl/

    

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

版权信息

查看更多关于jquery.jstree 使用的详细内容...

  阅读:37次