其他分享
首页 > 其他分享> > 前端动态菜单-bootstrap-treeview

前端动态菜单-bootstrap-treeview

作者：互联网

一、bootstrap-treeview

官网

Demo

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

 

插件依赖

 

二、使用方法

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

<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元素来作为该列表树的容器：

 <div id="treeview">

 

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

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对象来实现即可：

{
    text:"Node 1"
}

 

节点属性介绍

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

参数名称 参数类型 参数描述
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"
});

 

 

三、使用方法

1、你可以通过两种方式来调用方法

1、插件包装器：插件的包装器可以作为访问底层方法的代理。

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

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

 

2、直接使用treeview：你可以通过下面两种方法中的一种来获取treeview对象实例。

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

 

2、treeview方法列表

 

四、事件

你可以在参数中使用回调函数来绑定任何事件，或者使用标准的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) {
  // 事件代码...
});

 

可用事件列表

 

 

五、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>

 

 

 

标签：glyphicon,菜单,silent,bootstrap,nodeId,treeview,true,节点
来源： https://www.cnblogs.com/Zzbj/p/10477929.html