如何根據給定的數據庫數據顯示樹視圖？

表看起來像：如何根據給定的數據庫數據顯示樹視圖？

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

如何根據給定的數據庫數據顯示樹視圖？

回答

相關問題