Bootstrap 树形列表与右键菜单

介绍两个Bootstrap的扩展

Bootstrap Tree View 树形列表
jQuery contextMenu 右键菜单

Demo采用CDN分发，直接复制到本地就可以看到效果。也可以自己到上面的链接下载对应的js和css。

1. bootstrap-treeview

先上效果图：

不多BB，直接上完整Demo代码，复制下来自己对照着看，其他细节以及更多用法可以去上面的链接看作者怎么说。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 兼容IE -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap-treeview</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-sm-4">
			<h2>默认</h2>
			<div id="treeview1" class="">
			</div>
		</div>
		<div class="col-sm-4">
			<h2>自定义图标</h2>
			<div id="treeview2" class="">
			</div>
		</div>
		<div class="col-sm-4">
			<h2>丰富多彩</h2>
			<div id="treeview3" class="">
			</div>
		</div>
	</div>
</div>
<!-- Script -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
<script type="text/javascript">
  $(function() {

        // 设置树的相关属性并构造树
        $(\'#treeview1\').treeview({
 backColor: "#FFFFFF",
          color: "#428bca",
          enableLinks: true,
          data: getTree()
        });
$(\'#treeview2\').treeview({
          color: "#428bca",
          expandIcon: \'glyphicon glyphicon-chevron-right\',
          collapseIcon: \'glyphicon glyphicon-chevron-down\',
          nodeIcon: \'glyphicon glyphicon-bookmark\',
          data: getTree()
        });
$(\'#treeview3\').treeview({
          expandIcon: "glyphicon glyphicon-stop",
          collapseIcon: "glyphicon glyphicon-unchecked",
          nodeIcon: "glyphicon glyphicon-user",
          color: "yellow",
          backColor: "purple",
          onhoverColor: "orange",
          borderColor: "red",
          showBorder: false,
          showTags: true,
          highlightSelected: true,
          selectedColor: "yellow",
          selectedBackColor: "darkorange",
          data: getTree()
        });

    //定义树里的数据来源
  function getTree(){
    var data = [
    {
            text: \'Parent 1\',
            href: \'#parent1\',
            tags: [\'4\'],
            nodes: [
              {
                text: \'Child 1\',
                href: \'#child1\',
                tags: [\'2\'],
                nodes: [
                  {
                    text: \'Grandchild 1\',
                    href: \'#grandchild1\',
                    tags: [\'0\']
                  },
                  {
                    text: \'Grandchild 2\',
                    href: \'#grandchild2\',
                    tags: [\'0\']
                  }
                ]
              },
              {
                text: \'Child 2\',
                href: \'#child2\',
                tags: [\'0\']
              }
            ]
          },
          {
            text: \'Parent 2\',
            href: \'#parent2\',
            tags: [\'0\']
          },
          {
            text: \'Parent 3\',
            href: \'#parent3\',
             tags: [\'0\']
          },
          {
            text: \'Parent 4\',
            href: \'#parent4\',
            tags: [\'0\']
          },
          {
            text: \'Parent 5\',
            href: \'#parent5\'  ,
            tags: [\'0\']
          }
    ];
    return data;
  }
  });
  </script>
</body>
</html>

jQuery-contextMenu

先上效果图：

完整Demo代码，复制下来自己对照着看，其他细节以及更多用法可以去上面的链接看作者怎么说。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery-contextmenu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
</head>
<body>
<ul id="the-node" class="btn-group-vertical">
	<li class="btn btn-primary">right click me 1</li>
	<li class="btn btn-primary">right click me 2</li>
	<li class="btn btn-primary">right click me 3</li>
	<li class="btn btn-primary">right click me 4</li>
</ul>

<!-- Script -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>
<script>
$(function(){
    //注册右键菜单的项与动作
    $(\'#the-node\').contextMenu({
        selector: \'li\', // 选择器，为某一类元素绑定右键菜单
        callback: function(key, options) {
            var m = "clicked: " + key + " on " + $(this).text();
            window.console && console.log(m) || alert(m); 
        },
        items: {
            "edit": {name: "Edit", icon: "edit"},
            "cut": {name: "Cut", icon: "cut"},
            "copy": {name: "Copy", icon: "copy"},
            "paste": {name: "Paste", icon: "paste"},
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: function($element, key, item){ return \'context-menu-icon context-menu-icon-quit\'; }}
        }
    });
});
</script>
</body>
</html>