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

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

背景

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

组件基本信息

内容

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

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

image.png

需要的支持文件:

使用说明:
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开发等,这类前端组件文章主要就用于这类场景下的快速使用,有需要的可以持续关注。

本文声明:
88x31.png
知识共享许可协议
本作品由 cn華少 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CN華少

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值