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


Posted in Javascript onJanuary 09, 2016

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 AutoScroller 函数类
May 29 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 #Javascript
学习JavaScript设计模式之状态模式
Jan 08 #Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 #Javascript
js实现对ajax请求面向对象的封装
Jan 08 #Javascript
javascript弹性运动效果简单实现方法
Jan 08 #Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 #Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 #Javascript
You might like
php strcmp使用说明
2010/04/22 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
简述vue中的config配置
2018/01/23 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
javascript实现日历效果
2019/06/17 Javascript
浅谈numpy数组的几种排序方式
2017/12/15 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
python实现程序重启和系统重启方式
2020/04/16 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
人事助理自荐信
2014/02/02 职场文书
校园环保标语
2014/06/13 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
2014小学年度工作总结
2014/12/20 职场文书
单位接收函范文
2015/01/30 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB
vue里使用create, mounted调用方法
2022/04/26 Vue.js
详解MySQL的内连接和外连接
2023/05/08 MySQL