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. 111python

    补充一句,为兼容平台文件地址可以这么写: file = os.path.join('dir', 'file_name')

  2. miRNA几大常用的数据库

    1.miRbasehttp://www.mirbase.org/2.miRDBhttp://www.mirdb.org/miRDB/policy.html3.miRandahttp://www.mic ...

  3. ubuntu14.04, libtinyxml.so.2.6.2: cannot open shared object file: No such file or directory

    打包/opt/ros 打包项目文件install 到一台没有安装ros环境的机器上启动项目 source ros/indigo/setup.bash source install/setup.bash ...

  4. MongoDB（课时6 关系查询）

    支持关系查询操作:大于($gt),小于($lt),大于等于($gte),小于等于($lte),不等于($ne ),等于(key:value 或 $eq).想让这些操作正常使用,需要准备一个数据集合. ...

  5. [原][OSG]整理osg渲染一帧的流程

    参考:最长的一帧 先看下frame void ViewerBase::frame(double simulationTime) { advance(simulationTime);//记录仿真时间,帧 ...

  6. Tomcat启动之异常java.lang.IllegalStateException

    严重: Exception sending context destroyed event to listener instance of class org.springframework.web. ...

  7. 最长的文件路径 Longest Absolute File Path

    2018-07-30 22:05:52 问题描述: 问题求解: 本题个人感觉还是挺有意思的,题目要求的是最长的文件路径,其实是需要keep tracking路径长度,如果出现文件则需要进行比较,看是否 ...

  8. git 下载代码

    git clone https://github.com/ContextLogic/Wish-Merchant-API.git wish(wish是下载的地址,这样的话,就在你的住文件夹上)

  9. oracle11g中SQL优化（SQL TUNING）新特性之Adaptive Cursor Sharing (ACS)

    1.   ACS简介 Oracle Database 11g提供了Adaptive Cursor Sharing (ACS)功能,以克服以往不该共享的游标被共享的可能性.ACS使用两个新指标:sens ...

  10. [LeetCode] 29. Divide Two Integers(不使用乘除取模，求两数相除) ☆☆☆

    转载:https://blog.csdn.net/Lynn_Baby/article/details/80624180 Given two integers dividend and divisor, ...