树状图css代码（树状图或列表）[20240430更新]

本篇文章给大家谈谈树状图css代码，以及树状图或列表对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、html页面怎么以树状图样式显示出文件夹及其下的子文件夹
• 2、树状菜单代码..最好是vbscript的,急.在线等..
• 3、详解树状结构图 vue-org-tree
• 4、哪位大侠可以帮我写一段java代码！是关于根据数据库里的数据来形成一个动态树形图

html页面怎么以树状图样式显示出文件夹及其下的子文件夹

只是静态展示效果的话，HTML里的ul标签搭配一些CSS代码就能实现，如果想实现动态交互，例如点击展开、折叠文件夹的话，需要使用JS，当然，有专门的插件可以实现，例如：zTree，官网：

树状菜单代码..最好是vbscript的,急.在线等..

vbscript版的TreeView，也就是树

'=======================================================

'===efei Super TreeView

'===Code By efei(草不含羞)

'===Mailto:efei731@sina.com

'===2004.7

'=======================================================

Dim tvwRoot

Dim tvwChild

Dim tvwPrevious

Dim tvwNext

tvwRoot = 0

tvwChild = 1

tvwPrevious = 2

tvwNext = 3

'===树的类

Class TreeView

Public Name '对象名

Public TreeView_Name

Private ArrNodes '节点集合，从0开始

Private ArrImage '图标数组

Private AddFromExpand '节点的添加是否来自于父节点的展开

'===一些设置

Public FirstDisplayLevel '初次显示几层

Public UseConnectLine '使用节点之间的连接线

'Public ImagePath '图象目录

Public Target '链接目标

Public Font_Size '文字大小

Public Font_Family '字体

Public Font_Color '颜色

Public SelectedBgcolor '选中的节点背景色

'===图象目录=============================

Private lImagePath

Public Property Get ImagePath()

ImagePath = lImagePath

End Property

Public Property Let ImagePath(ByVal vNewValue)

'更新之前先去掉原来的节点的边框

lImagePath = vNewValue

If Right(lImagePath,1) "/" Then lImagePath = lImagePath "/"

End Property

'========================================

Private lSelectedNode '被选择的节点

Public Property Get SelectedNode()

Set SelectedNode = lSelectedNode

End Property

Public Property Let SelectedNode(ByVal vNewValue)

'更新之前先去掉原来的节点的边框

If Not lSelectedNode Is Nothing Then

With Document.getElementById("txt" lSelectedNode.Key).style

.background = ""

End With

End If

Set lSelectedNode = vNewValue

With Document.getElementById("txt" lSelectedNode.Key).style

.background = SelectedBgcolor

End With

End Property

Private lMenuNode

Private lPopupMenu

'===类的析构函数，用于初始化对象==============

Private Sub Class_Initialize()

'===初始化树对象

Document.Write "table id='TabTreeView' border='0' cellpadding='0' cellspacing='0'/table"

'===

Redim ArrNodes(0)

Set ArrNodes(0) = Nothing

name=""

TreeView_Name = "Efei Super TreeView"

Set lSelectedNode = Nothing

Set lMenuNode = Nothing

lPopupMenu = ""

Redim ArrImage(1,2)

ArrImage(0,0) = "FolderClose"

ArrImage(1,0) = "FolderClose.gif"

ArrImage(0,1) = "FolderOpen"

ArrImage(1,1) = "FolderOpen.gif"

ArrImage(0,2) = "Rplus"

ArrImage(1,2) = "Rplus.gif"

AddImage "root","root.gif"

AddImage "file","file.gif"

lImagePath = "Image/"

FirstDisplayLevel = 0

UseConnectLine = True

AddFromExpand = False

Target = "_Blank"

Font_Size = "12px"

Font_Family = "宋体"

Font_Color = "#000000"

SelectedBgcolor = "#D4D0C8"

End Sub

'===============================================

'===功能： 添加一个节点

'===参数： Text 节点显示的文本

' Key 节点关键字，该关键字必须唯一

' HyperLink 节点要链接到的地址

' Node 父节点或者兄弟节点

' AddType 添加类型，0-子节点，1-子节点，2-前置节点，3-后置节点

' Image 节点的图片，如空，则使用关闭的文件夹

Public Function add(ByVal Text,ByVal Key,ByVal HyperLink,ByRef Node,ByVal AddType,ByVal Image)

Dim i

'先检查关键字是否已存在，参数是否合法

Key = Trim(Key)

If Key = "" Then

Msgbox "关键字不能为空",vbInformation,TreeView_Name

Exit Function

End If

If NOT Me.Nodes(Key) Is Nothing Then

Msgbox "关键字【" Key "】已存在",vbInformation,TreeView_Name

Exit Function

End If

Text = Trim(Text)

If Text = "" Then

Msgbox "节点文本不能为空",vbInformation,TreeView_Name

Exit Function

End If

If IsNumeric(AddType) = True Then

If AddType 0 And AddType 3 Then

AddType = 1

End If

Else

AddType = 1

End If

If Node Is Nothing Then

If Me.NodesCount 0 Then

Msgbox "根节点只能有一个",vbInformation,TreeView_Name

Exit Function

End If

AddType = 0

End IF

Redim Preserve ArrNodes(Me.NodesCount)

Set ArrNodes(Ubound(ArrNodes)) = New Node

With ArrNodes(Ubound(ArrNodes))

.Key = Key

.Text=Text

.HyperLink=HyperLink

.AddType = AddType

.Image = Image

Set .parentObject = Me

Select Case AddType

Case 0 '根节点

Set .ParentNode=Nothing

Set .NextNode = Nothing

Case 1 '子节点

Set .ParentNode = Node '父节点

If Node.ChildrenCount 0 Then

Set .PreviousNode = Node.Children(Node.ChildrenCount)

Set Node.Children(Node.ChildrenCount).NextNode = ArrNodes(Ubound(ArrNodes))

End If

Set .NextNode = Nothing

Case 2 '插在前面

Set .ParentNode = Node.ParentNode

Set .PreviousNode = Node.PreviousNode

Set Node.PreviousNode.NextNode = ArrNodes(Ubound(ArrNodes))

Set Node.PreviousNode = ArrNodes(Ubound(ArrNodes))

Set .NextNode = Node

Case 3 '插在后面

Set .ParentNode = Node.ParentNode

Set .PreviousNode = Node

Set .NextNode = Node.NextNode

Set Node.NextNode = ArrNodes(Ubound(ArrNodes))

End Select

If Not .ParentNode Is Nothing Then

'更新父节点的内容

.Level = .ParentNode.Level + 1

.ParentNode.AddChild ArrNodes(Ubound(ArrNodes)) '添加子节点

End If

'If Image "" Then

' .Image = Me.Images(Image)

'End If

.Display

If .Level Me.FirstDisplayLevel Then

.DisplayStatus = 0

Else

If NOT .ParentNode Is Nothing AND AddFromExpand = False Then

If .ParentNode.ExpandStatus = 0 Then

.ParentNode.ExpandStatus = 1 '自己都显示了，那说明父节点肯定是展开的

End If

End If

.DisplayStatus = 1

End If

If NOT .ParentNode Is Nothing Then

RefreshImage .ParentNode

End If

'=================

End With

Set add = ArrNodes(UBound(ArrNodes))

End Function

'==============================================================================================

'===功能： 移除一个节点，包括该节点下的所有子节点=============================================

'===参数： Key 节点的Key，或者是顺序号

Public Function RemoveNode(ByVal Key)

Dim i

Dim Node

Set Node = Nothing

Key = Trim(Key)

If Key = "" Then

Exit Function

End IF

If IsNumeric(Key) = True Then

If Key 0 And Key = Me.NodesCount Then

Set Node = Nodes(Key)

End If

Else

Set Node = Nodes(Key)

End If

If Node Is Nothing Then

Exit Function

End If

Do Until Node.ChildrenCount = 0

RemoveNode Node.Children(1).Key

Loop

If Not Node.PreviousNode Is Nothing Then

'如果有前置节点，则要重新设置前置节点的后置节点

Set Node.PreviousNode.NextNode = Node.NextNode

End If

If Not Node.NextNode Is Nothing Then

'如果有后置节点，则要重新设置后置节点的前置节点

Set Node.NextNode.previousNode = Node.PreviousNode

End If

'===设置它的父节点的子节点内容================================

With Node.ParentNode

For i = 0 To .ChildrenCount - 1

If .ChildrenNodes(i).Key = Key Then

Exit For

End If

Next

For i = i To .ChildrenCount - 2

Set .ChildrenNodes(i) = .ChildrenNodes(i+1)

Next

.ChildrenCount = .ChildrenCount - 1

Redim Preserve ChildrenNodes(.ChildrenCount - 1)

End With

'=============================================================

'===设置树对象的节点集合======================================

For i = 0 To Ubound(ArrNodes)

If ArrNodes(i).Key = Key Then Exit For

Next

For i = i To Ubound(ArrNodes) - 1

Set ArrNodes(i) = ArrNodes(i+1)

Next

Redim Preserve ArrNodes(Ubound(ArrNodes)-1)

'==============================================================

Set Node = Document.getElementByID(Key).parentElement.parentElement

Node.ParentElement.parentElement.deleteRow Node.rowIndex

Set Node = Nothing

End Function

'==============================================================================================

'===Nodes集合，返回一个节点，如果没有，返回Nothing========

Public Function Nodes(index)

dim i

Set Nodes = Nothing

If IsNumeric(index) = True Then

If Ubound(ArrNodes)+1 = index And index 0 Then

Set Nodes = ArrNodes(index - 1)

End If

Else

If Ubound(ArrNodes) = 0 And ArrNodes(0) Is Nothing Then

Else

For i=0 to Ubound(ArrNodes)

If ArrNodes(i).Key = index Then

Set Nodes = ArrNodes(i)

End If

Next

End If

End If

End Function

'==========================================================

Public Property Get NodesCount()

If Ubound(ArrNodes) = 0 And ArrNodes(0) Is Nothing Then

NodesCount = 0

Else

NodesCount = Ubound(ArrNodes) + 1

End If

End Property

Public Property Let NodesCount(ByVal vNewValue)

Msgbox "NodesCount属性只读！"

End Property

'===功能： 清空图标集合=====================================

Public Function ClearAllImage()

Redim ArrImage(1,0)

End Function

'===End======================================================

'===功能： 添加图标集合=====================================

' 如果关键字imgKey存在，则更新，如不存在，则添加

'===参数： imgKey 图标关键字

' imgSrc 图标的名称

Public Function AddImage(ByVal imgKey,ByVal imgFileName)

dim i

For i=1 To Ubound(ArrImage,2)

If ArrImage(0,i) = imgKey Then

ArrImage(1,i) = imgFileName '更新

Exit Function

End If

Next

'添加

If IsNumeric(imgFileName) = True Then

Msgbox "图标关键字不能为纯数字！请使用字母或字母和数字的组合。"

Exit Function

End If

i = Ubound(ArrImage,2)+1

Redim Preserve ArrImage(1,i)

ArrImage(0,i) = imgKey

ArrImage(1,i) = imgFileName

End Function

'===End======================================================

'===功能： 根据关键字来得到图标的路径=======================

'===参数： imgKey 图标的关键字，或是索引。索引从1开始

Function Images(ByVal imgKey)

Dim i

Images = ""

If imgKey = "" Then Exit Function

If IsNumeric(imgKey) = True Then

If Cint(imgKey) = Ubound(ArrImage,2) AND Cint(imgKey) 0 Then

Images = Me.ImagePath ArrImage(1,imgKey)

End If

Else

For i = 1 To Ubound(ArrImage,2)

If Ucase(ArrImage(0,i)) = Ucase(imgKey) Then

Images = Me.ImagePath ArrImage(1,i)

Exit For

End If

Next

End If

End Function

'===End=======================================================

'===动态更新各个节点前的连接线符号=============================

Function RefreshImage(ByRef objNode)

Dim i,j

objNode.ExpandStatus = objNode.ExpandStatus

Dim objTemp

If NOT UseConnectLine Then Exit Function

For i = 1 To objNode.ChildrenCount '对子节点进行遍历

Set objTemp = objNode.Children(i)

For j = objNode.Level To 1 Step -1

If NOT objTemp.ParentNode Is Nothing Then

Set objTemp = objTemp.ParentNode

If NOT objTemp.NextNode Is Nothing Then

Document.getElementById(objNode.Children(i).Key).rows(0).cells(j).firstChild.src = Me.ImagePath "I.gif"

End If

End If

Next

RefreshImage objNode.Children(i)

Next

End Function

'===End===================================

详解树状结构图 vue-org-tree

温馨提示：不安装less-loader基本上都会报错

严老湿这边呢，就直接使用 Vue-cli 起步了， vue-org-tree 安装成功之后，我们就直接使用了，在 Vue 页面或者组件中使用 vue2-org-tree 标签，动态绑定data

data数据放入页面中

id 每个元素不同的ID ，label为name， children为自己的子集数据

效果图：

刚刚我们看到的是默认排列方式 ，其实还有一种排列方式，我们一起来看看

horizontal  是水平排列方式，我们来实践一下吧，它的参数是 true 、 false

看看效果如何：

使用 label-class-name  我们还可以动态绑定自定义 class

我们一起来尝试一下吧！

js:

css：

     看看效果图

折叠展示效果

折叠效果是有了，那么怎么展开呢？

js:

请看效果图：

问题又来了，默认展开如何实现？

请看大屏幕

在请求完数据之后直接调用,或者生命周期调用，可以自由发挥

第一个参数是你的资源data，第二个参数是全部展开或否

上效果图：

vue2-org-tree 向我们抛出了几个事件，我们先看看有哪些事件

on-node-click 就是被抛出的点击事件

我们在方法里面写一个NodeClick用来接受点击触发的值

打印结果：

它还向我们抛出了移入移出事件，返回值与点击事件大致相同

来了老弟？我们做移入移出，肯定是要有功能的对不对？

每当我们的鼠标移入到小盒子里就出现一个模态框用来展示data内容

js:

css:

上效果图：

propdescriptontypedefaultdata

Object

propsconfigure props

Object

{label: 'label', children: 'children', expand: 'expand'}

labelWidthnode label width

String

|

Number

auto

collapsablechildren node is collapsable

Boolean

true

renderContenthow to render node label

Function

-labelClassNamenode label class

Function

|

String

-selectedKeyThe key of the selected node

String

-selectedClassNameThe className of the selected node

Function

|

String

-

event namedescriptontypeclickClick event

Function

mouseoveronMouseOver event

Function

mouseoutonMouseOut event

Function

鼠标点击时调用它。

params e Event

params data Current node data

well be called when the node-label clicked

params e Event

params data Current node data

当鼠标悬停时调用它。

params e Event

params data Current node data

当鼠标离开时调用它。

params e Event

params data Current node data

最后附上Git地址：

预览地址：

关注“悲伤日记”更多精彩文章

哪位大侠可以帮我写一段java代码！是关于根据数据库里的数据来形成一个动态树形图

这是代码，你可以自己调试一下。

数据结构如下：

CREATE TABLE dtree (

id int,

pid int,

name varchar(200),

url varchar(200),

title varchar(200),

target varchar(200),

icon varchar(200),

iconopen varchar(200),

opened bit);

为了实现获取数据库变量功能，需要建立一个DTree类，并编译生成CLASS文件，放入\WEB-INF\classes文件夹下。

DTree类代码如下：

package work3;

public class DTree {

private int id;

private int pid;

private String name;

private String url;

private String title;

private String target;

private String icon;

private String iconOpen;

private int opened;

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public int getPid() {

return pid;

}

public void setPid(int pid) {

this.pid = pid;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getUrl() {

return url;

}

public void setUrl(String url) {

this.url = url;

}

public String getTitle() {

return title;

}

public void setTitle(String title) {

this.title = title;

}

public String getTarget() {

return target;

}

public void setTarget(String target) {

this.target = target;

}

public String getIcon() {

return icon;

}

public void setIcon(String icon) {

this.icon = icon;

}

public String getIconOpen() {

return iconOpen;

}

public void setIconOpen(String iconOpen) {

this.iconOpen = iconOpen;

}

public int getOpened() {

return opened;

}

public void setOpened(int opened) {

this.opened = opened;

}

}

work3.jsp代码如下：

%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%

%@ page import="java.sql.*"%

jsp:useBean id='settree' scope="application" class="work3.DTree" /

!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

""

html

head

meta http-equiv="Content-Type" content="text/html; charset=GB18030"

link rel="StyleSheet" href="dtree.css" type="text/css" /

script type="text/javascript" src="dtree.js"/script

titledTree in MySQL/title

/head

body

h2

Example

/h2

div class="dtree"

p

a href="javascript: d.openAll();"open all/a |

a href="javascript: d.closeAll();"close all/a

/p

script type="text/javascript"

!--

d = new dTree('d');

%

//驱动程序名

String driverName = "com.microsoft.jdbc.sqlserver.SQLServerDriver";

//数据库用户名

String userName = "sa";

//密码

String userPwd = "1";

//数据库名

String dbName = "master";

//表名

String tableName = "dtree";

//连接字符串

String url="jdbc:microsoft:sqlserver://localhost:1433;DatabaseName="+dbName;

//加载驱动

Class.forName(driverName).newInstance();

//连接数据库

java.sql.Connection conn = DriverManager.getConnection(url,userName,userPwd);

//得到Statement实例

java.sql.Statement statement = conn.createStatement();

//查询数据

String sql = "select * from " + tableName;

//返回结果

java.sql.ResultSet rs = statement.executeQuery(sql);

//获取变量

while (rs.next()) {

settree.setId(rs.getInt(1));

settree.setPid(rs.getInt(2));

settree.setName(rs.getString(3));

settree.setUrl(rs.getString(4));

settree.setTitle(rs.getString(5));

settree.setTarget(rs.getString(6));

settree.setIcon(rs.getString(7));

settree.setIconOpen(rs.getString(8));

settree.setOpened(rs.getInt(9));

if(settree.getPid()==0)

settree.setOpened(1);

%

d.add(%=settree.getId()%,%=settree.getPid()%,'%=settree.getName()%','%=settree.getUrl()%','%=settree.getTitle()%','%=settree.getTarget()%','','',%=settree.getOpened()%);

%

}

%

document.write(d);

//--

/script

/div

/body

/html

树状图css代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于树状图或列表、树状图css代码的信息别忘了在本站进行查找喔。