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. Java异常类复习总结

    个人理解先行: 异常类是当在程序出现问题时抛出的一个警告.提示你程序设计或者代码有存在错误的地方. 异常类和Error都继承自Throwable, Throwable继承自Object类. Runti ...

  2. echart提示框内容数据添加单位

    本文为博主原创,转载须注明转载地址: 方法为: tooltip : { trigger: 'axis', formatter: '{a0}:{c0}%' }, legend: { data:['测试' ...

  3. Windows 10 无法调节亮度的解决办法

    我的笔记本在更新完14393后开始的一段时间内是可以正常调节亮度的,但是后来就莫名奇妙地不能调节亮度了,而且电源选项里的亮度调节滚动条也不见了.网上查了很多方法,诸如修改注册表.更新驱动之类的都试过, ...

  4. python 时间元组转时间戳

    #!/usr/bin/python # -*- coding: UTF- -*- import time print(time.mktime((, , , , , , , , ))) 输出 15382 ...

  5. Unity如何判断一个对象是不是一件衣服

    判断该对象及其子对象上是否有SkinnedMeshRenderer组价即可 public static bool IsCloth(Transform obj) { bool isCloth = fal ...

  6. C#中简单的文件操作实例

    using System; using System.IO; namespace Demo { class Program { static string tmpPath = @"D:/Lg ...

  7. Contiguous Array with Equal Number of 0 & 1

    2018-07-08 13:24:31 问题描述: 问题求解: 问题规模已经给出是50000量级,显然只能是O(n),至多O(nlogn)的复杂度.本题使用DP和滑动数组都比较棘手,这里给出的方案是p ...

  8. Intellij IDEA 搭建Spring Boot项目(一)

    原文出处 第一步选择File –> New –> Project –>Spring Initialer –> 点击Next 第二步自己修改 Group 和 Artifact 字 ...

  9. 微信公众号菜单添加小程序，miniprogram，pagepath参数详解，php开发公众号

    随着微信小程序功能的开发, 已经可以跟公众号打通了, 主要有两种方式: 1) 在公众号文章中插入小程序 2) 在公众号菜单中添加小程序 第一种方式, 子恒老师在前面的课程已经详细介绍过, 今天来讲第二 ...

  10. English Words Type

    经常见到的: v = 动词,兼指及物动词和不及物动词,verb的缩写 n = 名词,noun的缩写 adj = 形容词, adjective的缩写 adv.表示副词, adverb的缩写 prep.表 ...