为jstree添加双击事件切换[展开/收缩]功能

一、概述

jstree是一个基于jQuery开发的优秀树插件，能够快速生成美观实用的树；目前项目中使用了这个插件遇到了一点问题，以前使用simpletree的时候可以双击父节点[展开/收缩]子节点，但是好像jstree没有提供这个功能，所以只有自己开发了。

使用的版本号：jsTree 1.0-rc1 没有添加双击功能时：http://www.kafeitu.me/demo/jstree/jstreeNormal.html

二、分析源码

因为现在要做的是监听双击事件所以在源码中查找[dblclick]，在整篇源代码中只有一个地方出现了dblclick，这就容易多了；

在第297行处，代码如下：

.bind("dblclick.jstree", function (event) {
	var sel;
	if(document.selection && document.selection.empty) { document.selection.empty(); }
	else {
		if(window.getSelection) {
			sel = window.getSelection();
			try {
				sel.removeAllRanges();
				sel.collapse();
			} catch (err) { }
		}
	}
})

先不要看这些代码的意思，除非你想深入了解jstree的细节

三、修改源码

在修改源码之前先考虑一个问题，点击树左边的三角符号是怎么触发的事件，答案很简单，在源码中查找click.jstree，也就是第290行代码处，这里最主要的一句话就是

this.toggle_node(trgt);

，调用了jstree提供的toggle_node方法，也就是可以切换[展开/收缩]树节点，很好，我们可以借用一下

在298行代码处加入两行代码：

var trgt = $(event.target).parent().find('ins').get(0);
$jstree.toggle_node(trgt);

这里使用的$jstree定义在283行的

init	: function () {

之后，

var $jstree = this;

，用$jstree引用jstree对象以便调用提供的接口； 现在解释一下298行添加的那两行代码，第一行查询到ins标签，第二行调用jstree的toggle_node切换树分支的展开和收缩； 至此大功告成！

四、结果演示

有双击功能的演示：http://www.kafeitu.me/demo/jstree/jstreeWithDblclick.html

五、程序下载

[download id=”30” format=”1”]