bootstrap-treeview自定义双击事件实现方法
bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于TwitterBootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。但是不知为什么这个插件没有自带双击事件。
经过多次测试，使用方法$('#tree').dblclick(function(){})和方法$('#tree').on('dblclick',function(){})都不起作用！百思不得其解。最后救助大神，问题解决了，但是好像不太优雅但最终还是可以交差了。
这个解决方案中使用到了bootstrap-treeview自带的两个事件"nodeSelected"和"nodeUnselected".如果在treeview的节点上双击一定会触发选中事件和取消选中事件，计算这两个时间的时间间隔就可以模拟出双击事件的效果了。双击事件每次点击鼠标左键的间隔，人为操作300毫秒足够。
具体代码如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
<linkhref="css/bootstrap.css"rel="stylesheet"/>
</head>
<body>
<divid="tree"style="width:400px;height:1000px;margin-left:auto;margin-right:auto;"></div>
<divid="testDate"></div>
<scriptsrc="js/jquery.js"></script>
<scriptsrc="js/bootstrap-treeview.js"></script>
<scripttype="text/javascript">
//获取树形结构列表数据
functiongetTree(){
vartree=[{
text:"Parent1",
nodes:[{
text:"Child1",
nodes:[{
text:"Grandchild1"
},{
text:"Grandchild2"
}]
},{
text:"Child2"
}]
},{
text:"Parent2"
},{
text:"Parent3"
},{
text:"Parent4"
},{
text:"Parent5"
}];
returntree;
}
//初始化树形结构列表
$('#tree').treeview({
data:getTree()
});
//最后一次触发节点Id
varlastSelectedNodeId=null;
//最后一次触发时间
varlastSelectTime=null;
//自定义业务方法
functioncustomBusiness(data){
alert("双击获得节点名字："+data.text);
}
functionclickNode(event,data){
if(lastSelectedNodeId&&lastSelectTime){
vartime=newDate().getTime();
vart=time-lastSelectTime;
if(lastSelectedNodeId==data.nodeId&&t<300){
customBusiness(data);
}
}
lastSelectedNodeId=data.nodeId;
lastSelectTime=newDate().getTime();
}
//自定义双击事件
functioncustomDblClickFun(){
//节点选中时触发
$('#tree').on('nodeSelected',function(event,data){
clickNode(event,data)
});
//节点取消选中时触发
$('#tree').on('nodeUnselected',function(event,data){
clickNode(event,data)
});
}
$('#tree').dblclick(function(){alert("HelloWorld!");});
$(document).ready(function(){
//customDblClickFun();
});
</script>
</body>
</html>
粗滤讲解：
最主要的全局变量：lastSelectedNodeId，lastSelectedNodeId
最主要的方法：clickNode()
上面这个方法主要用来判断选中事件和取消选中事件操作的目标是否是一个且时间间隔是否足够小。符合这两个条件客户就是想触发双击事件。可以再函数customBusiness中自定义业务逻辑。
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程
以上就是本文的详细内容，希望对大家的学习有所帮助。