bootstrap-treeview自定义双击事件实现方法_javascript技巧
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中自定义业务逻辑。
以上就是本文的详细内容，希望对大家的学习有所帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
bootstrap怎么引入Eclipse
Apr 05, 2024 am 02:30 AM
通过以下五步在 Eclipse 中引入 Bootstrap：下载 Bootstrap 文件并解压缩。导入 Bootstrap 文件夹到项目中。添加 Bootstrap 依赖项。在 HTML 文件中加载 Bootstrap CSS 和 JS。开始使用 Bootstrap 增强用户界面。
大模型一对一战斗75万轮，GPT-4夺冠，Llama 3位列第五
Apr 23, 2024 pm 03:28 PM
关于Llama3，又有测试结果新鲜出炉——大模型评测社区LMSYS发布了一份大模型排行榜单，Llama3位列第五，英文单项与GPT-4并列第一。图片不同于其他Benchmark，这份榜单的依据是模型一对一battle，由全网测评者自行命题并打分。最终，Llama3取得了榜单中的第五名，排在前面的是GPT-4的三个不同版本，以及Claude3超大杯Opus。而在英文单项榜单中，Llama3反超了Claude，与GPT-4打成了平手。对于这一结果，Meta的首席科学家LeCun十分高兴，转发了推文并
bootstrap中介效应检验结果怎么看stata
Apr 05, 2024 am 01:48 AM
Bootstrap中介效应检验在Stata中的解读步骤：检查系数符号：确定中介效应的正负向。检验p值：小于0.05表示中介效应显着。检查置信区间：不包含零表明中介效应显着。比较中值p值：小于0.05进一步支持中介效应的显着性。
bootstrap怎么引入idea
Apr 05, 2024 am 02:33 AM
在 IntelliJ IDEA 中引入 Bootstrap 的步骤：创建新项目并选择 "Web Application"。添加 "Bootstrap" Maven 依赖项。创建 HTML 文件并添加 Bootstrap 引用。替换为 Bootstrap CSS 文件的实际路径。运行 HTML 文件以使用 Bootstrap 样式。提示：可使用 CDN 引入 Bootstrap 或自定义 HTML 文件模板。
怎么用bootstrap检验中介效应
Apr 05, 2024 am 03:57 AM
Bootstrap检验采用重抽样技术评估统计检验的可靠性，用于证明中介效应的显着性：首先计算直接效应、间接效应和调解效应的置信区间；其次根据Baron和Kenny或Sobel方法计算调解类型的显着性；最后估计自然间接效应的置信区间。
edius自定义屏幕布局的操作流程
Mar 27, 2024 pm 06:50 PM
1、下图是edius默认的屏幕布局，默认的EDIUS窗口布局是横向版式，因此在单显示器环境中，许多窗口是重叠在一起的，且预览窗口为单窗口模式。2、您可以通过【视图】菜单栏启用【双窗口模式】，使预览窗口同时显示播放窗口和录制窗口。3、您可以通过【视图菜单栏>窗口布局>常规】来恢复默认屏幕布局。另外您还可以自定义适合您的布局方式，并保存为常用屏幕布局：将窗口拖动成适合自己的布局，然后点击【视图>窗口布局>保存当前布局>新建】，在弹出的【保存当前布局】小窗口中输入布局名称，单击确定
bootstrap中介检验结果怎么看
Apr 05, 2024 am 03:30 AM
Bootstrap 中介检验通过多次重新抽样数据来评估调解效应：间接效应置信区间：表示调解效应估计范围，如果区间不含零，则效应显着。 p 值：评估置信区间不含零的概率，小于 0.05 表示显着。样本量：用于分析的数据样本数量。 Bootstrap 次采样次数：重复抽样的次数（500-2000 次）。若置信区间不含零且 p 值小于 0.05，则调解效应显着，表明中介变量解释了自变量和因变量之间的关系。
bootstrap和springboot有什么区别
Apr 05, 2024 am 04:00 AM
Bootstrap 和 Spring Boot 的主要区别在于：Bootstrap 是一个轻量级 CSS 框架，用于网站样式，而 Spring Boot 是一个强大、开箱即用的后端框架，用于 Java web 应用程序开发。Bootstrap 基于 CSS 和 HTML，而 Spring Boot 基于 Java 和 Spring 框架。Bootstrap 专注于创建网站外观，而 Spring Boot 专注于后端功能。Spring Boot 可与 Bootstrap 集成，以创建功能齐全、美观
