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

html-css028

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

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

本次分享的组件是用于前端开发使用的tree树组件。

下面是其开源库中的描述内容：

需要的支持文件：

使用说明：

1、在页面中引用对应css和js文件

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

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

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

找到zTree相关的zTreeStyle.css文件，增加相应的样式，避免继承Bootstrap框架的样式。 如ztree li ul.line{ height: 80%} 这样就能避免继承了。

简单的话，可以这么做，用JS

function opencat(cat){

if(document.getElementById(cat).style.display=="none"){

document.getElementById(cat).style.display=""

}

else {

document.getElementById(cat).style.display="none"

}

}

然后在要收缩菜单的按钮或链接上这么做 比如超连接

<a id="menu1" href="#" style="display:block" onclick="opencat('list1')">

下面紧跟着的是展开后的目录内容，可以是Table，也可以是DIV

<table id="list1">

<tr><td>111111</td></tr>

<tr><td>222222</td></tr>

<tr><td>33333</td></tr>

<tr><td>4444444</td></tr>

<tr><td>5555555</td></tr>

</table>