组件分享之前端组件——bootstrap-treeview 简单的tree树组件

组件分享之前端组件——bootstrap-treeview 简单的tree树组件

背景

近期正在探索前端、后端、系统端各类常用组件与工具，对其一些常见的组件进行再次整理一下，形成标准化组件专题，后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。

组件基本信息

• 组件：bootstrap-treeview
• 开源协议：Apache-2.0 License

内容

本次分享的组件是用于前端开发使用的tree树组件。 下面是其开源库中的描述内容：

一个简单而优雅的解决方案来显示分层的树结构(即树视图)，同时充分利用了Twitter Bootstrap所提供的最佳功能。

image.png

需要的支持文件：

• Bootstrap v3.3.4 (>= 3.0.0)
• jQuery v2.1.3 (>= 1.9.0)

使用说明： 1、在页面中引用对应css和js文件

<link href="bootstrap.css" rel="stylesheet">

<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

2、创建一个容器，作为生成的树存储位置

<div id="tree"></div>

3、进行启动加载，具体data格式可以参考上面的开源库地址中的README。

function getTree() {
  // 一些逻辑检索，或生成树结构
  return data;
}

$('#tree').treeview({data: getTree()});

虽然前端现在已经被vue、react等占据，但仍然有一些小伙伴们仍在使用一体化开发，jsp开发等，这类前端组件文章主要就用于这类场景下的快速使用，有需要的可以持续关注。

本文声明：

本作品由 cn華少 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。