bootstrap双击事件怎么写

来源：动视网责编：小采时间：2020-11-27 15:01:31

bootstrap双击事件怎么写

bootstrap双击事件怎么写:推荐教程：Bootstrap教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。但是不知为什么这个插件没有自带双击事件。这个

推荐度：

点击下载本文 文档为doc格式

导读bootstrap双击事件怎么写:推荐教程：Bootstrap教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。但是不知为什么这个插件没有自带双击事件。这个

推荐教程：Bootstrap教程

　　bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。但是不知为什么这个插件没有自带双击事件。

　　这个双击事件的解决方案中使用到了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>

效果图：