bootstrap-treeview 自定义实现双击事件

2018/03 09 19:03

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树、列表树等等。但是不知为什么这个插件没有自带双击事件。

本人经过多次测试,使用方法$('#tree').dblclick( function () {})和方法$('#tree').on('dblclick',function(){})都不起作用!百思不得其解。最后救助大神,问题解决了,但是好像不太优雅但最终还是可以交差了。

这个解决方案中使用到了bootstrap-treeview自带的两个事件"nodeSelected"和"nodeUnselected".如果在treeview的节点上双击一定会触发选中事件和取消选中事件,计算这两个时间的时间间隔就可以模拟出双击事件的效果了。双击事件每次点击鼠标左键的间隔,人为操作300毫秒足够。

具体代码如下:

复制代码

复制代码

效果如下:

粗滤讲解:

最主要的全局变量:

lastSelectedNodeId,lastSelectedNodeId

最主要的方法:

clickNode()

上面这个方法主要用来判断选中事件和取消选中事件操作的目标是否是一个且时间间隔是否足够小。符合这两个条件客户就是想触发双击事件。可以再函数customBusiness中自定义业务逻辑。

 

最后描述下:本人这种解决方案一定不是最好的,可以相互交流。特意感谢下我们公司的牛人。

附加相关资源地址:

jQuery : http://jquery.com/

Bootstrap : http://v3.bootcss.com/

Bootstrap-treeview : http://www.htmleaf.com/jQuery/Menu-Navigation/201502141379.html

--转载请注明: https://www.guangboyuan.cn/bootstrap-treeview-%e8%87%aa%e5%ae%9a%e4%b9%89%e5%ae%9e%e7%8e%b0%e5%8f%8c%e5%87%bb%e4%ba%8b%e4%bb%b6/

发表回复

(必填)