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 相关文章推荐
菜单效果
Oct 14 Javascript
Javascript 构造函数 实例分析
Nov 26 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
详解ES6中的let命令
Apr 05 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
你准备好迎接vue3.0了吗
Apr 28 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
PHP动态变静态原理
2006/11/25 PHP
PHP MSSQL 存储过程的方法
2008/12/24 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
node.js基础知识汇总
2020/08/25 Javascript
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
django的csrf实现过程详解
2019/07/26 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
老总助理工作岗位职责
2014/02/06 职场文书
2014年冬季防火方案
2014/05/21 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
获奖感言怎么写
2015/07/31 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书