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

表看起来像：如何根据给定的数据库数据显示树视图？

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"类型结构中的评论。

如何格式化数据？

来源

2011-01-07 dave

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

来源

2011-01-07 07:19:22 Phrogz

P.S.除非必须，否则不要使用div元素（http://phrogz.net/CSS/HowToDevelopWithCSS.html#semanticmarkup）。 – Phrogz 2011-01-07 07:20:21

这似乎是一个好主意。我会在稍后尝试。干杯。 – dave 2011-01-07 07:23:38

-1

，如果你已经找到了如何获得入门（或祖先即数）的深度，那么你可以尝试以下方法：

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>

并且您将使用您的逻辑来确定要添加到跨度类属性的“标签”数量。您添加的每个“标签”都会将该行再向右多20个像素。

来源

2011-01-07 07:23:40 davogotland

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

回答

相关问题