欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

bootstrap treeview 和Table 击右键弹出菜单

程序员文章站 2022-06-08 10:40:44
...

      本文参考了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>