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-master（github）教材整理

    helloworld class HelloWorld { public static void main(String[] args) { System.out.println("hell ...

  2. 接口中带参方法,传入IB类型的数据

    不同的接口有不同的方法 不同的类有不同的作用 不同的作用产生不一样的效果 不同的效果让程序看似复杂,实际简单... 比如此程序,看似复杂,实际就那么点事: 谁生成了谁,谁设置了谁,谁传入了谁,谁被谁调 ...

  3. django 接口

    ajax部分: <html> <script type="text/javascript" src="./jquery-2.1.4.min.js&quo ...

  4. python json 文件读写

    import json test_dict = {,,,} print(test_dict) print(type(test_dict))#字典 #dumps 将数据转换成字符串 json_str = ...

  5. http 相关文章

    1. 百度百科 2.http | MDN 3.协议讲解 4.经典题 5.http与https的区别 6. http服务器返回状态总结 7.网络七层协议 开放式系统互联参考模型(OSI)的7层从上到下分 ...

  6. 浏览器滚动条及其影响 calc()

    1.浏览器滚动条 默认风格各异,推荐一插件  mCustomScrollbar 不考虑兼容也可自定义样式    链接二 2.影响 以垂直方向为例,当内容变化的时候,如果设置的是overflow:aut ...

  7. angular 模板语法（官方文档摘录）

    https://angular.cn/guide/template-syntax {{}} 和"" 如果嵌套,{{}}里面求完值,""就是原意 <h3&g ...

  8. Codeforces 534B - Covered Path

    534B - Covered Path 思路:贪心,每一秒取尽可能大并且可以达到的速度. 画张图吧,不解释了: 代码: #include<bits/stdc++.h> using name ...

  9. Zend Studio获取永久使用权

    网上有很多破解方式,什么注册码之类的,但是经过本人尝试有一个很easy的方法,那就是不用破解,让我们永久性试用下去! 当我们打开软件试用的时候试用期都是30天,当使用快到期的时候我们 打开目录C:\U ...

  10. import 与 import static

    原文链接:https://www.geeksforgeeks.org/static-import-java/ java中的静态引用 直接解释 一般引入类的方式:import java.lang.Mat ...