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

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

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

具体代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link href="css/bootstrap.css" rel="stylesheet" />

    </head>

    <body>

        <div id="tree" style="width: 400px;height: 1000px;margin-left: auto;margin-right: auto;"></div>

        <div id="testDate"></div>

        <script src="js/jquery.js"></script>

        <script src="js/bootstrap-treeview.js"></script>

        <script type="text/javascript">

            //获取树形结构列表数据

            function getTree() {

                var tree = [{

                    text: "Parent 1",

                    nodes: [{

                        text: "Child 1",

                        nodes: [{

                            text: "Grandchild 1"

                        }, {

                            text: "Grandchild 2"

                        }]

                    }, {

                        text: "Child 2"

                    }]

                }, {

                    text: "Parent 2"

                }, {

                    text: "Parent 3"

                }, {

                    text: "Parent 4"

                }, {

                    text: "Parent 5"

                }];

                return tree;

            }

            //初始化树形结构列表

            $('#tree').treeview({

                data: getTree()

            });

            //最后一次触发节点Id

            var lastSelectedNodeId = null;

            //最后一次触发时间

            var lastSelectTime = null;

            //自定义业务方法

            function customBusiness(data){

                alert("双击获得节点名字： "+data.text);

            }

            function clickNode(event, data) {

                if (lastSelectedNodeId && lastSelectTime) {

                    var time = new Date().getTime();

                    var t = time - lastSelectTime;

                    if (lastSelectedNodeId == data.nodeId && t < 300) {

                        customBusiness(data);

                    }

                }

                lastSelectedNodeId = data.nodeId;

                lastSelectTime = new Date().getTime();

            }

            //自定义双击事件

            function customDblClickFun(){

                //节点选中时触发

                $('#tree').on('nodeSelected', function(event, data) {

                    clickNode(event, data)

                });

                //节点取消选中时触发

                $('#tree').on('nodeUnselected', function(event, data) {

                    clickNode(event, data)

                });

            }

            $(document).ready(function() {

               customDblClickFun();

            });

        </script>

    </body>

</html>

效果如下：

粗滤讲解：

最主要的全局变量：

lastSelectedNodeId，lastSelectedNodeId

最主要的方法：

clickNode()

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

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

附加相关资源地址：

jQuery : http://jquery.com/

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

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

bootstrap-treeview 自定义实现双击事件的更多相关文章

  1. WPF 自定义Grid双击事件

    先设置Grid_MouseDown事件函数,然后在函数内增加如下代码 ) { //双击执行 } 更改数字可以区别单击和双击 感谢@一 定 会 去 旅 行

  2. cocos2d-x C++ (利用定时器自定义屏幕双击事件函数)

    //GameScene.h #include "cocos2d.h" USING_NS_CC; class GameScene : public cocos2d::Layer { ...

  3. C#-创建自定义双击事件

    .NET Compact Framework 不支持按钮的 Windows 窗体 DoubleClick 事件.但是您可以创建一个从 Button 类派生的控件来实现该事件. 创建自定义双击事件 创建 ...

  4. Android 自定义View实现单击和双击事件

    自定义View, 1. 自定义一个Runnable线程TouchEventCountThread ,  用来统计500ms内的点击次数 2. 在MyView中的 onTouchEvent 中调用 上面 ...

  5. 避免 C# TreeView NodeMouseDoubleClick 双击事件的节点错位的错误行为

    避免 C# TreeView NodeMouseDoubleClick 双击事件的节点错位的错误行为 在使用WinForm标准的TreeView控件的过程中,添加了如下类似的节点 parentNode ...

  6. [前端][自定义DOM事件]不使用setTimeout实现双击事件或n击事件

    使用setTimeout实现双击事件 例如,这样: let div = document.getElementById("div"); doubleClick(div, funct ...

  7. easyui datagrid 自定义单元格单击与双击事件（Day_38）

    $(function(){ $('#tableId').datagrid({//单击事件   onClickRow:function(rowIndex,rowData){  alert("单 ...

  8. jquery双击事件会触发单击事件

    实际工作中,我们经常会遇到在同一个元素上,绑定多种事件类型,比较常见的是单击事件和一些鼠标事件,一般而言影响不大.但是如果同时绑定单击事件和双击事件呢? 其实,只要能够想明白的话,解决方案也比较简单, ...

  9. Ionic实现自定义返回按键事件

    在 Android 和 Window 平台下,有时候我们需要监听返回按键的事件来进行相应的操作,也就是自定义返回按键事件.下面根据一个例子来讲解如何在 ionic 中自定义返回按键事件. 功能需求 首 ...

随机推荐

  1. 联想笔记本thinkpad按F2不能直接重命名

    联想笔记本thinkpad按F2不能直接重命名,而是Fn+F2. 解决: 按一下Fn+Esc(一般在左上角)

  2. makefile 中的符号替换（$@、$^、$<、$?）

    Makefile  $@, $^, $< $@  表示目标文件$^  表示所有的依赖文件$<  表示第一个依赖文件$?  表示比目标还要新的依赖文件列表 如一个目录下有如下文件: $ ls ...

  3. Nginx 随笔

    使用包管理工具安装nginx Linux(基于deb) sudo apt-get install nginx Linux(基于rpm) sudo yum install nginx FreeBSD s ...

  4. TPCx-BB源码分析

    Copy from: 一篇文章看懂TPCx-BB(大数据基准测试工具)源码 TPCx-BB是大数据基准测试工具,它通过模拟零售商的30个应用场景,执行30个查询来衡量基于Hadoop的大数据系统的包括 ...

  5. js插件---Bootstrap 树控件

    js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...

  6. 雷林鹏分享：C# 文件的输入与输出

    C# 文件的输入与输出 一个 文件 是一个存储在磁盘中带有指定名称和目录路径的数据集合.当打开文件进行读写时,它变成一个 流. 从根本上说,流是通过通信路径传递的字节序列.有两个主要的流:输入流 和 ...

  7. C#实现的UDP收发请求工具类实例

    本文实例讲述了C#实现的UDP收发请求工具类.分享给大家供大家参考,具体如下: 初始化: ListeningPort = int.Parse(ConfigurationManager.AppSetti ...

  8. Howto: 使用ImageBrush替换PictureMarkerSymbol以加强graphic显示性能

      软件: ArcGIS API for Microsoft Silverlight/WPF 9.3.1 操作系统: N/A 摘要:          ArcGIS API for Microsoft ...

  9. LeetCode--205--同构字符串

    问题描述: 给定两个字符串 s 和 t,判断它们是否是同构的. 如果 s 中的字符可以被替换得到 t ,那么这两个字符串是同构的. 所有出现的字符都必须用另一个字符替换,同时保留字符的顺序.两个字符不 ...

  10. 广播 (Broadcast)

    广播 :在Android中,Broadcast是一种广泛运用的在应用程序之间传输信息的机制.我们拿广播电台来做个比方.我们平常使用收音机收音是这样的:许许多多不同的广播电台通过特定的频率来发送他们的内 ...