bootstrap-treeview自定义双击事件实现方法

更新时间：2016年01月09日 08:48:08 作者：程序员之路

这篇文章主要介绍了bootstrap-treeview自定义事件双击事件实现方法,需要的朋友可以参考下

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)
    });
   }
   $('#tree').dblclick( function () { alert("Hello World!"); });
   $(document).ready(function() {
    //customDblClickFun();
   });
  </script>
 </body>

</html>

粗滤讲解：

最主要的全局变量：lastSelectedNodeId，lastSelectedNodeId

最主要的方法：clickNode()

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

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是本文的详细内容，希望对大家的学习有所帮助。

您可能感兴趣的文章:

JavaScript取得鼠标绝对位置程序代码介绍
文章介绍了关于JavaScript在不同浏览器下取得鼠标绝对位置相关函数用法及兼容性介绍，有需要的同学可参考一下
2012-09-09
JavaScript原始值与包装对象的详细介绍
这篇文章主要给大家介绍了关于JavaScript原始值与包装对象的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
js实现基于正则表达式的轻量提示插件
这篇文章主要介绍了基于正则表达式的轻量提示插件，兼容性强却文件轻巧的文本框检测插件,推荐给大家，有需要的小伙伴可以参考下。
2015-08-08
javascript 贪吃蛇实现代码
最近在学Javascript，花了半个月的时间终于把《Javascript权威指南》(推荐此书，入门级) 扫完。在学习的过程中发现使用JS实现动态效果挺有趣的。
2008-11-11
JS实现随机颜色的3种方法与颜色格式的转化
随机颜色和颜色格式是我们在开发中经常要用到的一个小功能，网上相关的资料也很多，想着有必要总结一下自己的经验。所以这篇文章主要介绍了JS实现随机颜色的3种方法与颜色格式的转化,需要的朋友可以参考借鉴，下面来一起看看吧。
2017-01-01
ES6 系列之 Generator 的自动执行的方法示例
这篇文章主要介绍了ES6 系列之 Generator 的自动执行的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
微信小程序时间选择插件使用详解
这篇文章主要为大家详细介绍了微信小程序时间选择插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
使用pkg打包ThinkJS项目的方法步骤
这篇文章主要介绍了使用pkg打包ThinkJS项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
Bootstrap CSS组件之按钮下拉菜单
这篇文章主要为大家详细介绍了Bootstrap CSS组件之按钮下拉菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
微信小程序实现简易加法计算器
这篇文章主要为大家详细介绍了微信小程序加法计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09