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)
});
}
$(document).ready(function() {
customDblClickFun();
});
</script>
</body> </html>
效果如下：
粗滤讲解：
最主要的全局变量：
lastSelectedNodeId，lastSelectedNodeId
最主要的方法：
clickNode()
上面这个方法主要用来判断选中事件和取消选中事件操作的目标是否是一个且时间间隔是否足够小。符合这两个条件客户就是想触发双击事件。可以再函数customBusiness中自定义业务逻辑。
最后描述下：本人这种解决方案一定不是最好的，可以相互交流。特意感谢下我们公司的牛人。
附加相关资源地址：
jQuery : http://jquery.com/
Bootstrap : http://v3.bootcss.com/
Bootstrap-treeview ： http://www.htmleaf.com/jQuery/Menu-Navigation/201502141379.html
bootstrap-treeview 自定义实现双击事件的更多相关文章
- WPF 自定义Grid双击事件
先设置Grid_MouseDown事件函数,然后在函数内增加如下代码 ) { //双击执行 } 更改数字可以区别单击和双击 感谢@一 定 会 去 旅 行
- cocos2d-x C++ (利用定时器自定义屏幕双击事件函数)
//GameScene.h #include "cocos2d.h" USING_NS_CC; class GameScene : public cocos2d::Layer { ...
- C#-创建自定义双击事件
.NET Compact Framework 不支持按钮的 Windows 窗体 DoubleClick 事件.但是您可以创建一个从 Button 类派生的控件来实现该事件. 创建自定义双击事件 创建 ...
- Android 自定义View实现单击和双击事件
自定义View, 1. 自定义一个Runnable线程TouchEventCountThread , 用来统计500ms内的点击次数 2. 在MyView中的 onTouchEvent 中调用 上面 ...
- 避免 C# TreeView NodeMouseDoubleClick 双击事件的节点错位的错误行为
避免 C# TreeView NodeMouseDoubleClick 双击事件的节点错位的错误行为 在使用WinForm标准的TreeView控件的过程中,添加了如下类似的节点 parentNode ...
- [前端][自定义DOM事件]不使用setTimeout实现双击事件或n击事件
使用setTimeout实现双击事件 例如,这样: let div = document.getElementById("div"); doubleClick(div, funct ...
- easyui datagrid 自定义单元格单击与双击事件（Day_38）
$(function(){ $('#tableId').datagrid({//单击事件 onClickRow:function(rowIndex,rowData){ alert("单 ...
- jquery双击事件会触发单击事件
实际工作中,我们经常会遇到在同一个元素上,绑定多种事件类型,比较常见的是单击事件和一些鼠标事件,一般而言影响不大.但是如果同时绑定单击事件和双击事件呢? 其实,只要能够想明白的话,解决方案也比较简单, ...
- Ionic实现自定义返回按键事件
在 Android 和 Window 平台下,有时候我们需要监听返回按键的事件来进行相应的操作,也就是自定义返回按键事件.下面根据一个例子来讲解如何在 ionic 中自定义返回按键事件. 功能需求 首 ...
随机推荐
- C语言通过枚举网卡，API接口可查看man 7 netdevice--获取接口IP地址
/*代码来自StackOverflow: http://stackoverflow.com/questions/212528/linux-c-get-the-ip-address-of-local-c ...
- ZOJ 3469 Food Delivery（区间DP）
https://vjudge.net/problem/ZOJ-3469 题意:在一条直线上有一个餐厅和n个订餐的人,每个人都有随时间上升的不满意值,从餐厅出发,计算出送完时最小的不满意值总和. 思路: ...
- vijos1904 学姐的幸运数字
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...
- python 连加
sum= number=int(input('请输入整数: ')) #递增for循环,从小到大打印出数字 print('从小到大排列输出数字:') ,number+): sum+=i #设置sum为i ...
- TinyXml节点查找及修改
参考:http://blog.csdn.net/zww0815/article/details/8083550 // 读者对象:对TinyXml有一定了解的人.本文是对TinyXml工具的一些知识点的 ...
- Codeforces 847B - Preparing for Merge Sort
847B - Preparing for Merge Sort 思路:前面的排序的最后一个一定大于后面的排序的最后一个.所以判断要不要开始新的排序只要拿当前值和上一个排序最后一个比较就可以了. 代码: ...
- web前端设计规范
hi,这里写出一点自己对web产品开发的一点粗浅的规范认识,一切为了敏捷开发哈哈. 1.流程. (1) 当产品给出原型和产品文档. (2)设计师更据原型,开始设计产品的效果图. (3)设计师设计完毕后 ...
- oracle创建/删除表空间、创建/删除用户并赋予权限
创建表空间 分开执行如下sql语句 --创建临时表空间 CREATE SMALLFILE TEMPORARY TABLESPACE "TEMP11" TEMPFILE 'E:\ap ...
- Linux : 密码正确不能正常登陆，日志提示Could not get shadow information for user
今天,再玩Centos7的时候,尝试修改了下ssh的端口.因为默认开启了SELinux,如果没有修改这个文件配置就修改端口sshd服务就不能正常启动了. 但是,当我修改会22端口的时候还是不能正常登陆 ...
- js下载图片
DownloadImgZP = imgPath => { const image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute('c ...