脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap-treeview自定义双击事件

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中lodash与lodash-es的区别

    浅谈javascript中lodash与lodash-es的区别

    本文主要介绍了javascript中lodash与lodash-es的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-10-10
  • 纯Javascript实现Windows 8 Metro风格实现

    纯Javascript实现Windows 8 Metro风格实现

    Windows 8 Metro风格设计，实现网站或系统功能的导航，在本文将为大家介绍下如何用纯Javascript实现Windows 8 Metro风格，感兴趣的朋友可以参考下
    2013-10-10
  • JS响应鼠标点击实现两个滑块区间拖动效果

    JS响应鼠标点击实现两个滑块区间拖动效果

    这篇文章主要介绍了JS实现的两个滑块区间拖动效果代码,涉及JavaScript响应鼠标事件针对页面元素的动态操作技巧,需要的朋友可以参考下
    2015-10-10
  • 使用flutter创建可移动的stack小部件功能

    使用flutter创建可移动的stack小部件功能

    本文主要介绍我为桌面和 Web 设计的一个超级秘密 Flutter 项目使用了画布和可拖动节点界面。本教程将展示我如何使用堆栈来使用小部件完成可拖动功能,需要的朋友可以参考下
    2021-10-10
  • javascript 组合按键事件监听实现代码

    javascript 组合按键事件监听实现代码

    这篇文章主要介绍了javascript 组合按键事件监听实现代码的相关资料,需要的朋友可以参考下
    2017-02-02
  • js实现汉字排序的方法

    js实现汉字排序的方法

    这篇文章主要介绍了js实现汉字排序的方法,涉及javascript针对中文编码的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • js实现addClass,removeClass,hasClass的函数代码

    js实现addClass,removeClass,hasClass的函数代码

    js实现addClass,removeClass,hasClass的函数代码，需要的朋友可以参考下。
    2011-07-07
  • uniapp小程序配置tabbar底部导航栏实战指南

    uniapp小程序配置tabbar底部导航栏实战指南

    tabBar如果应用是一个多tab应用,可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页,下面这篇文章主要给大家介绍了关于uniapp小程序配置tabbar底部导航栏的相关资料,需要的朋友可以参考下
    2022-09-09
  • 原生js实现的观察者和订阅者模式简单示例

    原生js实现的观察者和订阅者模式简单示例

    这篇文章主要介绍了原生js实现的观察者和订阅者模式,结合简单实例形式分析了js观察者和订阅者模式的相关原理与实现技巧,需要的朋友可以参考下
    2020-04-04
  • js实现拾色器插件（ColorPicker）

    js实现拾色器插件（ColorPicker）

    这篇文章主要为大家详细介绍了js实现拾色器插件ColorPicker，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05

最新评论