bootstrap样式的树形结构

今天有一个需求要以一个树形结构在网页上来展示数据信息。
网上有许多js实现的相关库可以直接使用，但由于我本身的网页使用的是bootstrap库，为了风格的统一，所以选择了一个bootstrap样式的树形结构。

运行出来的效果大致如下图所示：

工具/环境

方法/步骤

1

下载相应的库文件：

在百度中搜索bootstrap-treeview，找到对应的JS库文件并下载。
注意下载的文件里应包含js与css。


2

导入bootstrap-treeview库：

bootstrap-treeview依赖于jQuery v2.0.3版本及以上，所以在导入时，要在Jquery文件后导入。
CSS文件的导入则没有什么限制。


导入时所使用的代码如下（路径请自行确定）：

<link rel='stylesheet' type='text/css' href='./bootstrap-treeview/bootstrap-treeview.min.css'>

<script src='./lib/bootstrap-treeview/bootstrap-treeview.min.js'></script>

3

树型JSON结构：

树形结构的层次及各种显示内容是用JSON格式的数据来保存的，通常是在程序运行过程中动态生成了。
为了展示方便，一个静态的JSON树形结构的代码如下所示：

var data = [

   {

       text: "Parent 1",  // 结点文字

       icon: "oi oi-chevron-right",  // 未选中时文字左侧的图标

       selectedIcon: "oi oi-badge",  // 选中时文字左侧的图标

       tags: [9],  // 结构最右侧浮动显示的说明文字

       state: {

           expanded: true  // 有子结点的时候默认展开

       },

       nodes: [  // 定义子结点

           {

               text: "Child 1",

               nodes: [  // 定义子结点

                   {

                       text: "Grandchild 1"

                   },

                   {

                       text: "Grandchild 2"

                   }

               ]

           },

           {

               text: "Child 2"

           }

       ]

   },

   {  // 兄弟结点

       text: "Parent 2"

   }

];

4

结点的各种属性：

一个结点，除了上述提到的属性外，还可以设置以下的这些属性来显示不同的外观：

  text: "Node 1",

  icon: "glyphicon glyphicon-stop", // 设置的内容取决代码里使用的是那一种图标库。


  selectedIcon: "glyphicon glyphicon-stop", // 设置的样例值是bootstrap3自带的图标，如果你用的是bootstrap2或4，就看不到图标效果了。


  color: "#ff0000",

  backColor: "#00FFFF",

  href: "#node-1",  // 结合全局enableLinks选项为列表树节点指定URL。


  selectable: true,  // 指定列表树的节点是否可选择。
设置为false将使节点展开，并且不能被选择。


  state: {

    checked: true,

    disabled: true,

    expanded: true,

    selected: true

  },

  tags: ['available'],

  nodes: [

    {},

    ...

  ]

5

初始化树对象：

有了上面的基础知识后，就可以在UI上构建我们的树对象了：首先来一个DIV：

<div id="my_tree"></div>

然后在初始加载时往上面的DIV中填充树型结构：

$(function () {

    $('#my_tree').treeview({data: getTreeJSON(), showTags: true});

});

function getTreeJSON() {

   var data = 动态构造树形JSON结构

    return data;

}

treeview的data参数就是动态构造树形JSON结构，而showTags标识符设置为true，才能让模板结点的tags属性正确显示。


6

treeview方法与事件：

treeview方法提供的方法比较丰富，在这里就不一一列举了。
只简单举个例子，以下是调用checkAll方法：

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

而事件的绑定可以通过以下两种方式来操作：

1. 初始化树对象的回调函数：

$('#tree').treeview({

  onNodeSelected: function(event, data) {

    // 事件代码...

});  

2. 使用jQuery .on方法：

$('#tree').on('nodeSelected', function(event, data) {

  // 事件代码...

});  

7

你要注意的事情：

目前bootstrap-treeview的JS库所对应的bootstrap版本为3。
如果你使用的是bootstrap2或4，则在有一些效果上会出现偏差。
遇到这种情况，你可以根据bootstrap3的CSS效果，在现在的代码去再实现一下即可。


教程结束。