当前位置：首页 > 行业动态 > 正文

html树形图

admin
行业动态
2024-03-23
1

HTML树状图是一种用于展示层次结构数据的可视化方式，它可以清晰地显示数据之间的关系，在HTML中，我们可以使用表格、列表和嵌套的HTML元素来创建树状图，以下是如何使用HTML创建树状图并显示值的详细教程：

1、准备工作

我们需要创建一个HTML文件，并在文件中添加基本的HTML结构。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>HTML树状图示例</title>
</head>
<body>
    <!在这里添加树状图代码 >
</body>
</html>

2、创建树状图的基本结构

接下来，我们将使用ul和li元素创建树状图的基本结构，每个li元素表示树中的一个节点，而ul元素表示一个节点的子节点列表。

<ul>
    <li>节点1</li>
    <li>节点2</li>
    <li>节点3
        <ul>
            <li>子节点1</li>
            <li>子节点2</li>
        </ul>
    </li>
    <li>节点4</li>
</ul>

在这个例子中，我们创建了一个包含四个节点的树状图，其中节点3有两个子节点。

3、为树状图添加样式

为了使树状图更加美观，我们可以为其添加一些CSS样式，我们可以设置ul和li元素的字体大小、颜色和边距等属性。

<style>
    ul {
        liststyletype: none; /* 移除列表前的点 */
        paddingleft: 20px; /* 左侧增加边距 */
    }
    li {
        fontsize: 16px; /* 设置字体大小 */
        color: #333; /* 设置字体颜色 */
        marginbottom: 10px; /* 设置底部边距 */
    }
    li::before {
        content: "•"; /* 在每个列表项前添加符号 */
        marginright: 10px; /* 设置符号右侧边距 */
    }
</style>

4、为树状图添加值标签

为了在树状图中显示值，我们可以在每个li元素内部添加一个span元素，用于显示值。

<ul>
    <li><span>节点1</span></li>
    <li><span>节点2</span></li>
    <li><span>节点3</span>
        <ul>
            <li><span>子节点1</span></li>
            <li><span>子节点2</span></li>
        </ul>
    </li>
    <li><span>节点4</span></li>
</ul>

5、使用JavaScript动态生成树状图（可选）

如果需要动态生成树状图，可以使用JavaScript来实现，我们可以创建一个包含数据的对象数组，然后使用递归函数遍历数据并生成HTML代码，以下是一个简单的示例：

const data = [
    { id: 1, name: '节点1', parentId: null },
    { id: 2, name: '节点2', parentId: null },
    { id: 3, name: '节点3', parentId: 1 },
    { id: 4, name: '子节点1', parentId: 3 },
    { id: 5, name: '子节点2', parentId: 3 },
];
function generateTree(data) {
    const tree = []; // 用于存储生成的HTML代码的数组
    data.forEach(item => { // 遍历数据对象数组
        if (!item.parentId) { // 如果当前对象没有父节点（即根节点），则直接添加到树数组中并继续处理子节点（如果有的话）
            tree.push({ ...item, children: generateTree(data.filter(d => d.parentId === item.id)) }); // 使用递归函数处理子节点并将结果添加到当前对象的children属性中（如果没有子节点，则children为null）
        } else { // 如果当前对象有父节点，则将其添加到父节点的children属性中（如果父节点还没有children属性，则先创建该属性）