常州网络公司首页 >>> WEB编程 >> ASP.NET

jstree.net 双击

发布时间:2011-1-6 15:51:42   浏览次数:7441

   上一篇简单的吧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:120554323

 

上一条:jstree.net 单击
下一条:后台备份
首页 | 在线留言 | 网站地图

CopyRight ©2008-2014   糊涂蛋技术网    苏ICP备05013073号
站长:万创   QQ:54960248  E-mail:xlxcn#126.com