bootstrap-treeview自定义双击事件实现方法

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实战教程

以上就是本文的详细内容，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • JS树形菜单组件Bootstrap TreeView使用方法详解

    JS树形菜单组件Bootstrap TreeView使用方法详解

    简要介绍: 之前手头的一个项目需要去做一个左侧的树形菜单,右侧则是一个整体的iframe,从而构成一个整体的网站.一开始是打算用bootstrap的tree-view插件,直接把菜单的数据传过去就好了,结果后来项目又改了需求,菜单的内容和图表都是后台动态生成的,所以只能放弃使用bootstrap插件,自己着手写了一个树形菜单.本文主要分两部分讲,一个是对于bootstrap的treeview的实践,另一部分是介绍自己写的树形菜单. bootstrap-treeview: 组件介绍:http://

  • 浅析使用BootStrap TreeView插件实现灵活配置快递模板

    浅析使用BootStrap TreeView插件实现灵活配置快递模板

    bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 开发条件: 安装bootstrap-treeview插件,具体操作见: bootstrap-treeview 实现功能: 1.一个模板可指定子模板(包含多个地区.价格等) 2.编辑子模板地区时,动态改变tree的地区(其他子模板选中的地区disabled,此模板之前选中的

  • 基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合

    在上篇给大家介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串.list集合. 这种方式其实还是利用list集合的方式传给前台,只不过在前台做了一些小小的变化,而控制器代码也进行了部分的优化,值的一提的是:没用的ajax前后台交互舍弃掉了. 控制器代码如下: //实例化公共静态字典表集合 public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo

  • Bootstrap树形菜单插件TreeView.js使用方法详解

    Bootstrap树形菜单插件TreeView.js使用方法详解

    jQuery多级列表树插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都需要此功能,此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持,支持众多参数自定义功能,颜色.背景色.图标.链接等,还是很不错的. 效果图: 具体使用方法: 插件依赖 Bootstrap v3.0.

  • 浅析BootStrap Treeview的简单使用

    浅析BootStrap Treeview的简单使用

    bootstrap-treeview.js1是一款强大的树菜单插件,本文给大家介绍bootstrap treeview的简单使用. 废话不多说,直接上干干货. 1.bootstrap-treeview Github网址: https://github.com/jonmiles/bootstrap-treeview 2.使用要求: <!-- 样式表 --> <link href="~/Content/bootstrap.css" rel="stylesheet

  • BootStrap TreeView使用实例详解

    本文实例为大家分享了BootStrap TreeView使用代码,供大家参考,具体内容如下 <html> <head> <title></title> <link href="/Scripts/bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="/Scripts/bootstrap/css/bootstrap-treeview

  • bootstrap插件treeview实现全选父节点下所有子节点和反选功能

    bootstrap插件treeview实现全选父节点下所有子节点和反选功能

    项目需要实现权限管理,使用前端框架bootstrap,所以就直接选用了bootstrap的treeview扩展插件.先上图: 选中父节点时,父节点下所有子节点也都全部选中,看代码 1.HTML代码 <h2>TreeView Checkable</h2> <div id="treeview-checkable"></div> 2.Json数据 function getTvStateData() { var defaultData = [ {

  • 基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合

    本文支持两种方式的数据,一种为List集合,一种为json字符串. 先来介绍一下后台返回list集合(推荐使用此方法): 控制器代码如下: public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>(); /// <summary> /// TreeView视图 /// </summary> /// <returns></returns> publ

  • bootstrap-treeview自定义双击事件实现方法

    bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等.但是不知为什么这个插件没有自带双击事件. 经过多次测试,使用方法$('#tree').dblclick( function () {})和方法$('#tree').on('dblclick',function(){})都不起作用!百思不得其解.最后救助大神,问题解决了,但是

  • C#实现自定义双击事件

    本文以一个简单实例讲述了C#实现自定义双击事件的方法,分享给大家供大家参考之用.具体方法如下: 主要功能代码如下: public partial class Form1 : Form,IMessageFilter { public Form1() { InitializeComponent(); Application.AddMessageFilter(this); } private int WM_LBUTTONDBLCLK = 0x0203; public bool PreFilterMes

  • Android 自定义View实现单击和双击事件的方法

    自定义View, 1. 自定义一个Runnable线程TouchEventCountThread ,  用来统计500ms内的点击次数 2. 在MyView中的 onTouchEvent 中调用 上面的线程 3. 自定义一个Handler, 在TouchEventHandler 中 处理 统计到的点击事件, 单击, 双击, 三击, 都可以处理 核心代码如下: public class MyView extends View { ...... // 统计500ms内的点击次数 TouchEvent

  • Java List双击事件实现方法

    本文实例简述了Java List双击事件实现方法,有着不错的借鉴价值.分享给大家供大家参考之用.具体方法如下: 1. 定义一个MouseListener: 2. 在mouseListener中增加mouseClicked事件: 3. 由MouseEvent的getSource()获得List对象: 4. 由List的getSelectedIndex()事件获得点击项的Index: 5. 根据Index,用List的getItem()方法获得点击项; 6. 最后,用addMouseListener

  • C#实现给DataGrid单元行添加双击事件的方法

    本文实例讲述了C#实现给DataGrid单元行添加双击事件的方法.分享给大家供大家参考.具体如下: 现在我需要做到的功能是当我单击DataGrid某行时显示相对应选中的数据信息,在双击此相同行时弹出删除对话框,应该怎么做呢.由于单击问题很简单就不再阐述了,下面我说一下双击事件是怎么实现的. 这里用到了DataGrid的ItemDataBound事件,我们可以把下面的代码加入到所需的程序中就可实现双击的功能. private void DataGrid1_ItemDataBound( object

  • Android双击事件拦截方法

    下文我们介绍两种双击事件拦截的方式 1.通过Android的事件分发机制进行拦截(dispatchTouchEvent) 话不多说,直接上代码: /** 判断是否是快速点击 */ private static long lastClickTime; public static boolean isFastDoubleClick() { long time = System.currentTimeMillis(); long timeD = time - lastClickTime; if (0

  • bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法

    bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法

    本文实例讲述了bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法.分享给大家供大家参考,具体如下: Bootstrap官网中,只介绍了breadcrumb的布局(如下图),未介绍使用方法,如何动态增加面包屑title及点击事件的响应. 本人在使用过程中探索出以下的方式. 首先,在html文件里定义div <div> <ul class="breadcrumb " style="margin-bottom:0px;visibility:

  • iOS touch事件区分单击双击响应的方法

    如果您的 iPhone 应用里有个 view,既有单击操作又有双击操作.用户双击 view 时,总是先执行一遍单击的操作再执行双击的操作.所以直接判断时就会发现不能直接进入双击操作.下面是区分 touch 事件是单击还是双击的方法 -(void)singleTap{ NSLog(@"Tap 1 time"); } -(void)doubleTap{ NSLog(@"Tap 2 time"); } - (void)touchesBegan:(NSSet *)touch

  • js鼠标单击和双击事件冲突问题的快速解决方法

    情况一 如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件,当在这个DOM对象上发生双击事件时,第一次点击(click)会 触发一次单击(click)事件,第二次点击(连续的)也会触发双击(dblclick)事件,还是会触发单击(click)事件(IE7与 firefox). 解决方法: <button onclick="test(1)" ondblclick="test(2)"></button> <scr

  • jQuery实现自定义事件的方法

    本文实例讲述了jQuery实现自定义事件的方法.分享给大家供大家参考.具体分析如下: jQuery是一个非常强大的工具.jQuery非常有用的功能之一是可以实现事件绑定.你可以实现创建,绑定事件,可触发自己定义的jQuery事件. 自定义事件触发 下面的代码是它自定义事件触发.你可以绑定到这个自定义事件. $event.trigger("myEventName"); 自定义事件绑定 下面的代码创建了一个绑定到自定义事件和自定义事件触发时将被执行. $(this).bind("

随机推荐