jstree.net 双击

       上一篇简单的吧jstree的单击事件，这一篇我们继续研究jstree的双击事件

   一、jstree双击事件

      本节主要介绍jstree的双击事件。这个是翻遍了jstree的官方网站的，没有双击的事件。但是每次都点击前面的那个三角符号或者图片按钮，真的挺不喜欢的，目前项目中使用了这个插件遇到了一点问题，以前使用simpletree的时候可以双击父节点[展开/收缩]子节点，但是好像jstree没有提供这个功能，所以只有靠自己了。还是功夫不负有心人啊。呵呵，在网上找了一牛人，早就发现了这样的问题。所以我就转载了他的成果哈，多谢咖啡兔大哥。

     

   二、分析源码

因为现在要做的是监听双击事件所以在源码中查找[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.wsria.cn/demo/jstree/jstreeWithDblclick.html

 

   五、程序下载

下载：jquery.jstree.dblclick.js 

 

       这些都是很简单的，因为官方的是php版本的，搞.net的朋友很多也没有去安装php的环境，为了搞jstree，我还特地去安装了php+mysql环境，然后去测试，呵呵，为大家节约的时间吧。

      如果有什么不理解的地方，请给本人留言。我们可以互相交流，共同进步。 jstree功能如读取xml格式数据添加、删除节点、异步查找节点并结合.net开发等的功能以后还会继续进行完善，请继续关注。 联系QQ群：161077434