Question

表格如下：

id | title | parent | depth |
---+-------+--------+-------+
 1 | blah  |  0     |  0
---+-------+--------+-------+
 2 | blah  |  0     |  0
---+-------+--------+-------+
 3 | blah  |  0     |  0
---+-------+--------+-------+
 4 | blah  |  2     |  1
---+-------+--------+-------+
 5 | blah  |  2     |  1
---+-------+--------+-------+
 6 | blah  |  5     |  2
---+-------+--------+-------+

我想获取该数据并将其输出到树状视图中。类似于：

1 - blah
2 - blah
    4 - blah
    5 - blah
        6 - blah
3 - blah

有人建议我使用查询：

SELECT title, depth FROM table ORDER BY parent, id

然后我可以使用depth在左边创建空格并格式化树。这一直有效，直到我使用HTML。我希望能够在有效的HTML中很好地格式化它，然后用CSS等设置它...

只使用深度，我想不出用div class="parent/child"类型结构包装注释的方法。

如何格式化数据？

Answer 1

在HTML中使用<ul>，每个项目使用<li>。每次与最后一项相比深度增加时，请向当前<ul>添加一个<li>，而不是关闭它。如果当前深度低于前一深度，则为每个深度差异级别关闭一个</ul></li>对。

Answer 2

如果您已经弄清楚如何获取条目的深度（或祖先的数量），那么您可以尝试以下方法：

css代码：

.tab {
    margin-left: 20px;
}

呈现的HTML代码：

<p>
    <span class="">1 - blah</span><br />
    <span class="">2 - blah</span><br />
    <span class="tab">4 - blah</span><br />
    <span class="tab">5 - blah</span><br />
    <span class="tab tab">6 - blah</span><br />
    <span class="">3 - blah</span>
</p>

并且您将使用您的逻辑来确定要添加到span的class属性的“tab”数量。您添加的每个“标签”都会将该行放在右侧20多个像素处。

如何根据给定的数据库数据显示树视图？

2 个答案: