组件分享之前端组件——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 国际许可协议 进行许可。
  • 1
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
评论 3

打赏作者

CN華少

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值