推薦教學：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>效果圖：
##重點：
最主要的全域變數：
lastSelectedNodeId，lastSelectedNodeId
最主要的方法：
clickNode()
上面這個方法主要用來判斷這個方法主要用來判斷選取事件和取消選取事件操作的目標是否為一個且時間間隔是否足夠小。符合這兩個條件客戶就是想觸發雙擊事件。可以再函數
中自訂業務邏輯。
###原文網址:https://www.cnblogs.com/chengxuyuanzhilu/p/5114155.html###以上是bootstrap雙擊事件怎麼寫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
