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 相关文章推荐
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
PHP 裁剪图片
2021/03/09 PHP
jquery遍历input取得input的name
2009/04/27 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
Vue项目History模式404问题解决方法
2018/10/31 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
python实现用户答题功能
2018/01/17 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
历史专业大学生职业生涯规划书
2014/03/13 职场文书
党日活动总结
2014/05/07 职场文书
论文答辩开场白大全
2015/05/27 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏