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语言结构小记(一)
Sep 10 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 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中用hash实现的数组
2011/07/17 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
python实现支付宝转账接口
2019/05/07 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
求职简历中自我评价
2014/01/28 职场文书
股权转让意向书
2014/04/01 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
表扬信格式模板
2015/05/05 职场文书
勤俭节约主题班会
2015/08/13 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫