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

2022-03-06 09:13:02 浏览数 (1)

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

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

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

image.png

需要的支持文件：

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

代码语言：javascript复制

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

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

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

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

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

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

0 人点赞