前端动态菜单-bootstrap-treeview

时间 2019-12-11

标签前端动态菜单 bootstrap treeview 栏目 Bootstarp 繁體版

原文原文链接

1、bootstrap-treeview

官网javascript

Democss

bootstrap-treeview是一款效果很是酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。html

插件依赖java

Bootstrap v3.0.3
jQuery v2.0.3

2、使用方法

首先要在页面中引入依赖文件和 bootstrap-treeview.js文件。node

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>

可使用任何HTML DOM元素来做为该列表树的容器：jquery

 <div id="treeview">

该列表树插件最基本的调用方法以下：git

var defaultData = [
  {
    text:"Parent 1", // text 定义菜单标题
    nodes: [  // 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"
  }
];                 


$('#treeview').treeview({
    data: defaultData,
});

最简单的树结构能够只有一个节点，使用一个带text属性的js对象来实现便可：github

{
    text:"Node 1"
}

节点属性介绍npm

下面的参数可用于树节点的属性定义，如节点的文本、颜色和标签等。bootstrap

参数名称	参数类型	参数描述
text	String(必选项)	列表树节点上的文本，一般是节点右边的小图标。
icon	String(可选项)	列表树节点上的图标，一般是节点左边的图标。
selectedIcon	String(可选项)	当某个节点被选择后显示的图标，一般是节点左边的图标。
href	String(可选项)	结合全局enableLinks选项为列表树节点指定URL。
selectable	Boolean. Default: true	指定列表树的节点是否可选择。设置为`false`将使节点展开，而且不能被选择。
state	Object(可选项)	一个节点的初始状态。
state.checked	Boolean，默认值`false`	指示一个节点是否处于checked状态，用一个checkbox图标表示。
state.disabled	Boolean，默认值`false`	指示一个节点是否处于disabled状态。（不是selectable，expandable或checkable）
state.expanded	Boolean，默认值`false`	指示一个节点是否处于展开状态。
state.selected	Boolean，默认值`false`	指示一个节点是否能够被选择。
color	String. Optional	节点的前景色，覆盖全局的前景色选项。
backColor	String. Optional	节点的背景色，覆盖全局的背景色选项。
tags	Array of Strings. Optional	经过结合全局showTags选项来在列表树节点的右边添加额外的信息。

全局参数

参数名称	参数类型	默认值	描述
data	Array of Objects	无	列表树上显示的数据。
backColor	String	全部合法的颜色值，Default: inherits from Bootstrap.css。	设置全部列表树节点的背景颜色。
borderColor	String	全部合法的颜色值，Default: inherits from Bootstrap.css。	设置列表树容器的边框颜色，若是不想要边框能够设置`showBorder`属性为false。
checkedIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-check"	设置处于checked状态的复选框图标。
collapseIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-minus"	设置列表树可收缩节点的图标。
color	String	全部合法的颜色值，Default: inherits from Bootstrap.css。	设置列表树全部节点的前景色。
emptyIcon	String：class名称	Bootstrap Glyphicons定义的"glyphicon"。	设置列表树中没有子节点的节点的图标。
enableLinks	Boolean	false	是否使用当前节点的文本做为超连接。超连接的`href`值必须在每一个节点的data结构中给出。
expandIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-plus"	设置列表树可展开节点的图标。
highlightSearchResults	Boolean	true	是否高亮搜索结果。
highlightSelected	Boolean	true	当选择节点时是否高亮显示。
onhoverColor	String	全部合法的颜色值， Default: '#F5F5F5'。	设置列表树的节点在用户鼠标滑过期的背景颜色。
levels	Integer	Default: 2	设置继承树默认展开的级别。
multiSelect	Boolean	false	是否能够同时选择多个节点。
nodeIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop"	设置全部列表树节点上的默认图标。
selectedIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop"	设置全部被选择的节点上的默认图标。
searchResultBackColor	String	全部合法的颜色值， Default: undefined, inherits。	设置搜索结果节点的背景颜色。
searchResultColor	String	全部合法的颜色值， Default: '#D9534F'	设置搜索结果节点的前景颜色。
selectedBackColor	String	全部合法的颜色值， Default: '#428bca'	设置被选择节点的背景颜色。
selectedColor	String	全部合法的颜色值， Default: '#FFFFFF'。	设置列表树选择节点的背景颜色。
showBorder	Boolean	true	是否在节点上显示边框。
showCheckbox	Boolean	false	是否在节点上显示checkboxes。
showIcon	Boolean	true	是否显示节点图标。
showTags	Boolean	false	是否在每一个节点右边显示tags标签。tag值必须在每一个列表树的data结构中给出。
uncheckedIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-unchecked"	设置图标为未选择状态的checkbox图标。

var options = {
    data:defaultData , //data属性是必须的，是一个对象数组    Array of Objects.
    color: "", //全部节点使用的默认前景色，这个颜色会被节点数据上的backColor属性覆盖.        String
    backColor: "#000000", //全部节点使用的默认背景色，这个颜色会被节点数据上的backColor属性覆盖.     String
    borderColor: "#000000", //边框颜色。若是不想要可见的边框，则能够设置showBorder为false。        String
    nodeIcon: "glyphicon glyphicon-stop", //全部节点的默认图标
    checkedIcon: "glyphicon glyphicon-check", //节点被选中时显示的图标         String
    collapseIcon: "glyphicon glyphicon-minus", //节点被折叠时显示的图标        String
    expandIcon: "glyphicon glyphicon-plus", //节点展开时显示的图标        String
    emptyIcon: "glyphicon", //当节点没有子节点的时候显示的图标              String
    enableLinks: false, //是否将节点文本呈现为超连接。前提是在每一个节点基础上，必须在数据结构中提供href值。        Boolean
    highlightSearchResults: true, //是否高亮显示被选中的节点        Boolean
    levels: 2, //设置整棵树的层级数  Integer
    multiSelect: false, //是否能够同时选择多个节点      Boolean
    onhoverColor: "#F5F5F5", //光标停在节点上激活的默认背景色      String
    selectedIcon: "glyphicon glyphicon-stop", //节点被选中时显示的图标     String

    searchResultBackColor: "", //当节点被选中时的背景色
    searchResultColor: "", //当节点被选中时的前景色

    selectedBackColor: "", //当节点被选中时的背景色
    selectedColor: "#FFFFFF", //当节点被选中时的前景色

    showBorder: true, //是否在节点周围显示边框
    showCheckbox: false, //是否在节点上显示复选框
    showIcon: true, //是否显示节点图标
    showTags: false, //是否显示每一个节点右侧的标记。前提是这个标记必须在每一个节点基础上提供数据结构中的值。
    uncheckedIcon: "glyphicon glyphicon-unchecked", //未选中的复选框时显示的图标，能够与showCheckbox一块儿使用
};

例如：

$('#treeview').treeview({
    data: defaultData,
    color: "#4F4F4F",
    expandIcon: 'glyphicon glyphicon-chevron-right',
    collapseIcon: 'glyphicon glyphicon-chevron-down',
    nodeIcon: 'glyphicon glyphicon-bookmark',
    enableLinks: true,
    levels: 1,
    showIcon:false,
    selectedBackColor: "",
    selectedColor: "#333"
});

3、使用方法

一、你能够经过两种方式来调用方法

一、插件包装器：插件的包装器能够做为访问底层方法的代理。

$('#treeview').treeview('methodName', args)

多个参数必须使用数组对象来传入。

二、直接使用treeview：你能够经过下面两种方法中的一种来获取treeview对象实例。

// 该方法返回一个treeview的对象实例
$('#treeview').treeview(true)
  .methodName(args);
// 对象实例也保存在DOM元素的data中，
// 可使用'treeview'的id来访问它。
$('#treeview').data('treeview')
  .methodName(args);

二、treeview方法列表

checkAll(options)：选择全部的节点。

 
          $( 
          '#treeview' 
          ).treeview( 
          'checkAll' 
          , { silent:  
          true  
          });

触发nodeChecked事件，传入silent来阻止其它事件。

checkNode(node | nodeId, options)：选择指定的节点，接收节点或节点ID。

 
          $( 
          '#treeview' 
          ).treeview( 
          'checkNode' 
          , [ nodeId, { silent:  
          true  
          } ]);

触发nodeChecked事件，传入silent来阻止其它事件。

clearSearch()：清空之前的搜索结果。例如清除它们的高亮状态。

$( '#treeview' ).treeview( 'clearSearch' );

触发searchCleared事件。

collapseAll(options)：折叠全部的节点，折叠整个树。

 
          $( 
          '#treeview' 
          ).treeview( 
          'collapseAll' 
          , { silent:  
          true  
          });

触发nodeCollapsed事件，传入silent来阻止其它事件。

collapseNode(node | nodeId, options)：折叠指定节点和它的子节点。若是不想折叠子节点，能够设置{ ignoreChildren: true }。

 
          $( 
          '#treeview' 
          ).treeview( 
          'collapseNode' 
          , [ nodeId, { silent:  
          true 
          , ignoreChildren:  
          false  
          } ]);

触发nodeCollapsed事件，传入silent来阻止其它事件。

disableAll(options)：禁用全部的节点。

 
          $( 
          '#treeview' 
          ).treeview( 
          'disableAll' 
          , { silent:  
          true  
          });

触发nodeDisabled事件，传入silent来阻止其它事件。

disableNode(node | nodeId, options)：禁用指定的节点，接收节点或节点ID。

 
          $( 
          '#treeview' 
          ).treeview( 
          'disableNode' 
          , [ nodeId, { silent:  
          true  
          } ]);

触发nodeDisabled事件，传入silent来阻止其它事件。

enableAll(options)：启用全部的节点。

 
          $( 
          '#treeview' 
          ).treeview( 
          'enableAll' 
          , { silent:  
          true  
          });

触发nodeEnabled事件，传入silent来阻止其它事件。

enableNode(node | nodeId, options)：启用指定的节点，接收节点或节点ID。

 
          $( 
          '#treeview' 
          ).treeview( 
          'enableNode' 
          , [ nodeId, { silent:  
          true  
          } ]);

触发nodeEnabled事件，传入silent来阻止其它事件。

expandAll(options)：展开全部的树节点。也能够展开任何给定级别的树节点。

 
          $( 
          '#treeview' 
          ).treeview( 
          'expandAll' 
          , { levels: 2, silent:  
          true  
          });

触发nodeExpanded事件，传入silent来阻止其它事件。

expandNode(node | nodeId, options)：展开指定的树节点，接收节点或节点ID。也能够展开任何给定级别的树节点。

 
          $( 
          '#treeview' 
          ).treeview( 
          'expandNode' 
          , [ nodeId, { levels: 2, silent:  
          true  
          } ]);

触发nodeExpanded事件，传入silent来阻止其它事件。

getCollapsed()：返回折叠节点的数组。例如state.expanded = false。

$( '#treeview' ).treeview( 'getCollapsed' , nodeId);
getDisabled()：返回被禁用节点的数组。

$( '#treeview' ).treeview( 'getDisabled' , nodeId);
getEnabled()：返回可用节点的数组。

$( '#treeview' ).treeview( 'getEnabled' , nodeId);
getExpanded()：返回全部展开节点的数组。

$( '#treeview' ).treeview( 'getExpanded' , nodeId);
getNode(nodeId)：返回给定节点ID的单一节点对象。

$( '#treeview' ).treeview( 'getNode' , nodeId);
getParent(node | nodeId)：返回给定节点的父节点，若是没有则返回undefined。

$( '#treeview' ).treeview( 'getParent' , node);
getSelected()：返回全部被选择节点的数组，例如：state.selected = true。

$( '#treeview' ).treeview( 'getSelected' , nodeId);
getSiblings(node | nodeId)：返回给定节点的兄弟节点的数组，若是没有则返回undefined。

$( '#treeview' ).treeview( 'getSiblings' , node);
getUnselected()：返回没有被选择节点的数组。例如：state.selected = false。

$( '#treeview' ).treeview( 'getUnselected' , nodeId);
remove()：移除列表树容器。移除附加的事件、附加对象和额外的html元素。

$( '#treeview' ).treeview( 'remove' );

revealNode(node | nodeId, options)：显示一个树节点，展开从这个节点开始到根节点的全部节点。

 
          $( 
          '#treeview' 
          ).treeview( 
          'revealNode' 
          , [ nodeId, { silent:  
          true  
          } ]);

触发nodeExpanded事件，传入silent来阻止其它事件。

search(pattern, options)：搜索匹配是很是的指定树节点，并高亮它们。返回配平节点的数组。

 
          $( 
          '#treeview' 
          ).treeview( 
          'search' 
          , [  
          'Parent' 
          , { 
         
          ignoreCase: 
          true 
          ,     
          // case insensitive 
         
          exactMatch: 
          false 
          ,    
          // like or equals 
         
          revealResults: 
          true 
          ,  
          // reveal matching nodes 
         
          }]); 
         
          $('##treeview').treeview('search', [ value,{ ignoreCase: false, exactMatch: false },attr]); 
         
          value:值， 
         
          attr:须要查询的属性

触发searchComplete事件。

selectNode(node | nodeId, options)：选择一个给定的树节点，接收节点或节点ID。

 
          $( 
          '#treeview' 
          ).treeview( 
          'selectNode' 
          , [ nodeId, { silent:  
          true  
          } ]);

触发nodeSelected事件，传入silent来阻止其它事件。

toggleNodeChecked(node | nodeId, options)：切换节点的Check状态。

 
          $( 
          '#treeview' 
          ).treeview( 
          'toggleNodeChecked' 
          , [ nodeId, { silent:  
          true  
          } ]);

触发nodeChecked事件或nodeUnchecked事件，传入silent来阻止其它事件。

toggleNodeDisabled(node | nodeId, options)：切换一个节点的可用和不可用状态。

 
          $( 
          '#treeview' 
          ).treeview( 
          'toggleNodeDisabled' 
          , [ nodeId, { silent:  
          true  
          } ]);

触发nodeDisabled事件或nodeEnabled事件，传入silent来阻止其它事件。

toggleNodeExpanded(node | nodeId, options)：切换一个节点的展开和折叠状态。

 
          $( 
          '#treeview' 
          ).treeview( 
          'toggleNodeExpanded' 
          , [ nodeId, { silent:  
          true  
          } ]);

触发nodeExpanded事件或nodeCollapsed事件，传入silent来阻止其它事件。

toggleNodeSelected(node | nodeId, options)：切换一个节点的选择状态。

 
          $( 
          '#treeview' 
          ).treeview( 
          'toggleNodeSelected' 
          , [ nodeId, { silent:  
          true  
          } ]);

触发nodeSelected事件或nodeUnselected事件，传入silent来阻止其它事件。

uncheckAll(options)：Uncheck全部的节点。

 
          $( 
          '#treeview' 
          ).treeview( 
          'uncheckAll' 
          , { silent:  
          true  
          });

触发nodeUnchecked事件，传入silent来阻止其它事件。

uncheckNode(node | nodeId, options)：Uncheck一个给定的节点，接收节点或节点ID。

 
          $( 
          '#treeview' 
          ).treeview( 
          'uncheckNode' 
          , [ nodeId, { silent:  
          true  
          } ]);

触发nodeUnchecked事件，传入silent来阻止其它事件。

unselectNode(node | nodeId, options)：不选择指定的节点，接收节点或节点ID。

 
          $( 
          '#treeview' 
          ).treeview( 
          'unselectNode' 
          , [ nodeId, { silent:  
          true  
          } ]);

触发nodeUnselected事件，传入silent来阻止其它事件。

4、事件

你能够在参数中使用回调函数来绑定任何事件，或者使用标准的jQuery.on()方法来绑定事件。

在参数中调用的示例

$('#treeview').treeview({
  // The naming convention for callback's is to prepend with `on`
  // and capitalize the first letter of the event name
  // e.g. nodeSelected -> onNodeSelected
  onNodeSelected:function(event, data) {
    // 事件代码...
});

使用jQuery.on()方法：

$('#treeview').on('nodeSelected',function(event, data) {
  // 事件代码...
});

可用事件列表

nodeChecked (event, node)：一个节点被checked。
nodeCollapsed (event, node)：一个节点被折叠。
nodeDisabled (event, node)：一个节点被禁用。
nodeEnabled (event, node)：一个节点被启用。
nodeExpanded (event, node)：一个节点被展开。
nodeSelected (event, node)：一个节点被选择。
nodeUnchecked (event, node)：一个节点被unchecked。
nodeUnselected (event, node)：取消选择一个节点。
searchComplete (event, results)：搜索完成以后触发。
searchCleared (event, results)：搜索结果被清除以后触发。

5、Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>treeviewDemo</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
</head>
<body>
<div id="treeview"></div>


<script type="text/javascript">

    // $(function(){...})这个是在页面DOM文档加载完成后加载执行的，等效于$(document).ready(function(){...});
    // 优于window.onload，后者必须等到页面内包括图片的全部元素加载完毕后才能执行

    $(function () {
        var defaultData = [
            {
                text: 'Parent 1',
                tags: ['2'],
                nodes: [
                    {
                        text: 'Child 1',
                        tags: ['3'],
                        nodes: [
                            {
                                text: 'Grandchild 1',
                                tags: ['6']
                            },
                            {
                                text: 'Grandchild 2',
                                tags: ['3']
                            }
                        ]
                    },
                    {
                        text: 'Child 2',
                        tags: ['3']
                    }
                ]
            },
            {
                text: 'Parent 2',
                tags: ['7']
            },
            {
                text: 'Parent 3',
                icon: 'glyphicon glyphicon-earphone',
                href: '#demo',
                tags: ['11']
            },
            {
                text: 'Parent 4',
                icon: 'glyphicon glyphicon-cloud-download',
                href: '/demo.html',
                tags: ['19'],
                selected: true
            },
            {
                text: 'Parent 5',
                icon: 'glyphicon glyphicon-certificate',
                color: 'pink',
                backColor: 'red',
                href: 'http://www.tesco.com',
                tags: ['available', '0']
            }
        ];

        $('#treeview').treeview({
            data: defaultData,
            color: "#4F4F4F",
            expandIcon: 'glyphicon glyphicon-chevron-right',
            collapseIcon: 'glyphicon glyphicon-chevron-down',
            nodeIcon: 'glyphicon glyphicon-bookmark',
            enableLinks: true,
            levels: 1,
            showIcon: false,
            selectedBackColor: "",
            selectedColor: "#333"
        });


        $('#treeview').on('nodeSelected', function (event, data) {
            console.log(data);
        })
    });
</script>
</body>
</html>