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 相关文章推荐
关于jQuery中的end()使用方法
Jul 10 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
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
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
html中table数据排序的js代码
2011/08/09 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
Python中的元类编程入门指引
2015/04/15 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
python得到单词模式的示例
2018/10/15 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
银行存款证明样本
2014/01/17 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
研讨会致辞
2015/07/31 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python