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>

巴特西

Bootstrap 树形列表与右键菜单

Bootstrap 树形列表与右键菜单

1. bootstrap-treeview

jQuery-contextMenu

最新文章

热门文章