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 击右键弹出菜单

Guess you like
