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. JS进阶系列之内存空间

    也许很多人像我一样,觉得JS有垃圾回收机制,内存就可以不管了,以至于在全局作用域下定义了很多变量,自以为JS会自动回收,直到最近,看了阮一峰老师,关于javascript内存泄漏的文章时,才发现自己写 ...

  2. testlogin

    !/usr/bin/env python coding:utf-8 import requests import unittest import json,urllib class testlogin ...

  3. Java I/O学习——File

    File我们出看可能会根据字面意思理解为文件,其实它既代表文件又代表目录. 这里有一个例子可以列出指定目录下的所有文件或目录, 以及我们可以过滤得到我们想要的文件 import java.io.Fil ...

  4. Could not find a package configuration file provided by 'ecl_threads' ,.................couldn't find required component 'ecl_threads'

    sudo apt-get install ros-kinetic-ecl-threads

  5. Jmeter Connect to Cassandra

    https://github.com/Netflix/CassJMeter/wiki https://stackoverflow.com/questions/40974407/connecting-c ...

  6. Android手机摄像头编程入门

    本讲内容:Android手机摄像头编程入门智能手机中的摄像头和普通手机中的摄像头最大的区别在于,智能机上的摄像头可以由程序员写程序控制, 做一些有趣的应用譬如,画中画,做一些有用的应用譬如二维码识别, ...

  7. Spring AMQP 源码分析 02 - CachingConnectionFactory

    ### 准备 ## 目标 了解 CachingConnectionFactory 在默认缓存模式下的工作原理   ## 前置知识   <Spring AMQP 源码分析 01 - Impatie ...

  8. Codeforces 534B - Covered Path

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

  9. 转：Too many systemd: Created slice !

    OS: centos-release-7-4.1708 /va/log/message  大量这种提示信息: resolvent: Here is how I got rid of these: vi ...

  10. 5-13 Rspec实际; validates处理Errors, TDD, 单元测试和验收测试，capybara

    validates处理验证错误:详见ActiveModel::Errors文档 一,errors ActiveModel::Errors的实例包含所有的❌.每个错误:key是每个属性的name, va ...