bootstrap中怎么实现一个双击事件_程序开发

bootstrap中怎么实现一个双击事件

创始人

2024-12-17 02:22:41

0次

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

　　这个双击事件的解决方案中使用到了bootstrap-treeview自带的两个事件"nodeSelected"和"nodeUnselected".如果在treeview的节点上双击一定会触发选中事件和取消选中事件，计算这两个时间的时间间隔就可以模拟出双击事件的效果了。双击事件每次点击鼠标左键的间隔，人为操作300毫秒足够。

代码如下：

//获取树形结构列表数据 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(); });

效果图：

重点：

　　最主要的全局变量：

　　　　lastSelectedNodeId，lastSelectedNodeId

　　最主要的方法：

　　　　clickNode()

上一篇：为什么前端开发不用bootstrap

下一篇：bootstrap中怎么实现点击表格表头排序

bootstrap中怎么实现一个双击事件

相关内容

热门资讯