bootstrap treeview 和Table 击右键弹出菜单
Posted 姚家湾
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap treeview 和Table 击右键弹出菜单相关的知识，希望对你有一定的参考价值。
本文参考了Bootstrap Styled Context Menu Plugin With jQuery 并且在该网页上下载了bootstrap-contextmenu.js.
contextmenu 实现击右键弹出子菜单。 它可以和bootstrap-treeview以及table 结合起来使用。
测试过的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>neo4j On NodeJS</title>
<meta charset="utf-8">
<title>Bootstrap 实例 - 默认的导航栏</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-contextmenu.js"></script>
<script src="/js/bootstrap-treeview.js"></script>
<script>
var treeData = [
{
text: "Parent 1",
selectable: true,
state: {
checked: true,
expanded: false,
selected: true
},
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"
}
];
</script>
</head>
<body>
<div class="container" style="margin-top:150px;">
<h1>Bootstrap Context Menu Plugin Demo</h1>
<h3>Treeview</h3>
<div id="tree">
</div>
<h3>Table</h3>
<table id="myTable" class="table table-inverse">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none">
<li class="dropdown-item"><a tabindex="-1" href="#">Action</a></li>
<li class="dropdown-item"><a tabindex="-1" href="#">Another action</a></li>
<li class="dropdown-item"><a tabindex="-1" href="#">Something else here</a></li>
<li class="dropdown-divider"></li>
<li class="dropdown-item"><a tabindex="-1" href="#">Separated link</a></li>
</ul>
<script>
function collapseNode(nodeId) {
$('#tree').treeview('collapseNode', [nodeId]);
//alert("collapse " + nodeId);
}
function expandNode(nodeId) {
$('#tree').treeview('expandNode', [nodeId]);
// alert("expand " + nodeId);
}
$('#tree').treeview({
data: treeData,
multiSelect: true,
highlightSelected: false,
onNodeSelected: function(event, node) {
if (node.state.expanded) {
console.log(node.text);
collapseNode(node.nodeId);
} else {
console.log(node.text);
expandNode(node.nodeId);
}
}
});
$("#tree").contextMenu({
menuSelector: "#contextMenu",
menuSelected: function (invokedOn, selectedMenu) {
var msg = "You selected the menu item '" + selectedMenu.text() +
"' on the value '" + invokedOn.text() + "'";
alert(msg);
}
});
$("#myTable").contextMenu({
menuSelector: "#contextMenu",
menuSelected: function (invokedOn, selectedMenu) {
var msg = "You selected the menu item '" + selectedMenu.text() +
"' on the value '" + invokedOn.text() + "'";
alert(msg);
}
});
</script>
</div>
</body>
</html>
以上是关于bootstrap treeview 和Table 击右键弹出菜单的主要内容，如果未能解决你的问题，请参考以下文章
bootstrap-treeview中文API 以及后台JSON数据处理