概述

近期做的项目中，后台管理系统模块需要实现树形菜单，故采用bootstrap treeview插件来实现此功能。

插件网址

jQuery多级列表树插件bootstrap-treeview

安装使用

1. 到官网下载插件，解压。
2. 引入依赖的样式文件bootstrap.css，jquery.js脚本文件，以及bootstrap-treeview.js脚本文件；
   例如：

<!-- 引入依赖的样式及脚本-->
<link ref="stylesheet" href="../../css/bootstrap.css">
<script src="../../js/jquery.js"></script>
<script src="../../js/bootstrap-treeview.js"></script>

使用

创建容器

<!-- 树形菜单的外层容器 -->
<div id="menuTree"></div>
<!--  跳转页面的容器 -->
<div class="content">
 <iframe src="index1.html" frameborder="0" id="currentPage"></iframe>
</div>

准备树形数据

var treeData = [
{
   text: "item1",
   icon: "fa fa-cube"
   nodes: [
     {
       text: "item1-1",
      icon: "fa fa-cube"
       href:"index1.html",
       state: {
            checked: false,
             disabled: false,
             expanded: false,
             selected: true
       }
     },
     {
       text: "item1-2",
      icon: "fa fa-cube"
       href:"index2.html",
        state: {
            checked: false,
             disabled: false,
             expanded: false,
             selected: false
       }
     }
   ]
 },
 {
   text: "item2",
  icon: "fa fa-cube"
   href:"index3.html",
    state: {
            checked: false,
             disabled: false,
             expanded: false,
             selected: false
       }
 }
];

参数说明：

text： 树形菜单显示的文本；
icon： 树形菜单显示的图标；
href： 点击菜单条目时，跳转的页面路径；

初始化

$('#menuTree').treeview({
  data: treeData,// 树形菜单数据
  emptyIcon: "icon-circle",
  enableLinks: false,
  levels: 1,// 展开层级
  backColor: "transparent",// 背景
  color: "#ffffff",// 文本颜色
  selectable: true,
  state: {
      checked: true,
      disabled: true,
      expanded: true,
      selected: true
    },
  selectedBackColor: "#5485F7",// 选中时的背景色
  selectedColor: '#ffffff',//选中时的文本颜色
  onhoverColor: "#5485F7",// hover时的颜色
  showBorder: false,
  expandIcon: 'fa fa-angle-right',// 展开图标
  collapseIcon: 'fa fa-angle-down',// 收缩图标
  onNodeSelected: function(event, data) {// 选中事件
    if (data && data.href) {
        // 打开相应的页面，内嵌iframe的方式
        $('#currentPage').attr('src', data.href)
    }
  // 重置收缩展开
    if (data.nodes != null) {
          var select_node = $('#menuTree').treeview('getSelected');
            if (select_node[0].state.expanded) {
                    $('#menuTree').treeview('collapseNode', select_node);
                          select_node[0].state.selected = false;
                    } else {
                        $('#menuTree').treeview('expandNode', select_node);
                        select_node[0].state.selected = false;
                    }
              }
    }
 });

设置页面初始化时展开的节点

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

当页面初始化时，默认展开第一个节点，展开层级数为2;
注意：
页面初始化时，设置展开节点并选中第一个节点，需要给节点设置：

 state: {
    checked: false,
    disabled: false,
     expanded: false,
     selected: true
 }

初始化不需要选中的节点则是：

 state: {
    checked: false,
    disabled: false,
    expanded: false,
    selected: false
  }