jquery.jstree adds the double-click event code of the node

jquery.jstree adds the double-click event code of the node_jquery

WBOY

Release： 2016-05-16 18:22:20

Original

1593 people have browsed it

jsTree is a jquery-based tree plug-in that supports drag-and-drop, copy, delete, shortcut keys, multi-selection, custom node icons, custom right-click menus, cross-page saving status, etc. In short, it basically has everything I can think of. And the most commendable thing is that it doesn't feel slow at all.

jsTree has a node selection event, that is,

Copy code The code is as follows:

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

Actually, I think it is more like a click event of a node, because it will trigger every time a node is clicked, regardless of whether the node has been is selected.

Recently, when doing file management, I need to use the double-click event of a node, such as double-clicking a node to open the editing page of the node.
jquery.jstree adds the double-click event code of the node_jquery

jquery.jstree adds the double-click event code of the node_jquery

Although jstree has a double-click event, it is not targeted at nodes. Instead, it will be triggered when you double-click the area where the tree is located, as shown in any place in the picture above.

The closest thing to the node double-click event should be the node selection event, so it's another "picture of the gourd".

Analysis
In line 833, this.get_container() is followed by the click event of the node

Copy code The code is as follows:

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

Similarly, I insert the node double-click event here

Copy code The code is as follows:

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

Then, I implement dblclick_node The method is fine.

Find the select_node code on line 928, which is more complicated. But 90% of them are useless for double-clicking, such as processing single selection, multiple selection, saving selection results to cookies, etc. Therefore, the implementation of the dblclick_node method is much simpler than select_node.

Copy code The code is as follows:

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

OK, that’s it.

Usage example
The usage is the same as select_node

Copy the code The code is as follows:

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

Renovated code download /201007/yuanma/jquery.jstree.rar
By the way
jstree and another plug-in jquery validate are incompatible. When the two coexist, although jstree can also construct a tree, it cannot be expanded like a zombie. Mark it here and try to see if you can modify it in the future.

Author: Bruce (The Art World of Programming)