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操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 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中const与define的应用区别
2013/06/18 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
详解Python的Lambda函数与排序
2016/10/25 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
python利用7z批量解压rar的实现
2019/08/07 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
Python如何实现远程方法调用
2020/08/07 Python
python中类与对象之间的关系详解
2020/12/16 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
体育教育专业自荐信范文
2013/12/20 职场文书
上课睡觉检讨书
2014/01/28 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
Python与C++中梯度方向直方图的实现
2022/03/17 Python