PHP - 簡單嵌套無序列表（UL）數組

Question

我在stackoverflow上看到了這個嵌套的UL數組問題的一些變體，但我認為我的比其他更簡單。 我正在尋找一個簡單的數組循環，允許無限量的主題（父母）與無限量的項目（兒童），如：

<ul>
    <li>Topic</li>
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
</ul>

我用以下代碼嘗試了這個：

<?php
$result = mysql_query("SELECT * FROM News");

$topicname = false;

while($row = mysql_fetch_array($result)) {
    if (!$row['TopicID']) {
            $row['TopicName'] = 'Sort Me';
    }
    if ($topicname != $row['TopicName']) {
        echo '<ul><li>' . $row['TopicName'] . '</li><ul>';
        $topicname = $row['TopicName'];
    }
    echo '';
    echo '<li>' . $row['NewsID'] . '"</li>';
    echo '';
}
if ($topicname != $row['TopicName']) {
    echo '</ul>';
    $topicname = $row['TopicName'];
}   
?>

上面的代碼呈現如下：

* Topic A
      o News 1
      o News ...
      o News 51000
            + Topic B
                  # News 1
                  # News ...
                  # News 51000
                        * Topic C
                              o News 1
                              o News ...
                              o News 51000
                                    + Topic D
                                          # News 1
                                          # News ...
                                          # News 51000

希望代碼呈現以下內容：

* Topic A
      o News 1
      o News ...
      o News 51000
* Topic B
      o News 1
      o News ...
      o News 51000
* Topic C
      o News 1
      o News ...
      o News 51000
* Topic D
      o News 1
      o News ...
      o News 51000

任何想法將不勝感激！

馬克解決的問題; 有可能解決這個相關的問題嗎？

嗨Mark：是的，這就行了！ 非常有幫助，謝謝。 我想知道你是否能夠幫助我把它帶到另一個復雜程度。 如果你認為在這個問題中提出問題是不合適的，請告訴我，我會另外提出，但你的代碼是可靠的，所以我想我會跟進它。

使用上面相同的代碼，我希望通過選擇1列，2列，3列，4列，5列等（最多10個）為用戶提供查看數據的選項。 數據行將被分成單獨的DIV標記，行計數將包括主題和新聞項。 我將使用我的CSS控制DIV標簽，但我想將行計數均勻地分組到指定數量的列的DIV標簽中。 我希望兒童新聞項目不要與其父母和群體分開，以盡可能地分開。 如果有一個斷點，其中1列可以比另一列長，並且它是偶數/任意的，優先級將轉到最左邊的列，如：這個迷你插圖：

XXX
XX
X

我不知道這有多清楚，所以這里有一個例子。 如果用戶選擇1列，他們將看到以下30行“數據”：

<div id="Columns1Group1of1">
* Topic A
      o News 1
      o News 2
      o News 3
* Topic B
      o News 1
      o News 2
      o News 3
      o News 4
* Topic C
      o News 1
      o News 2
      o News 3
      o News 4
      o News 5
* Topic D
      o News 1
      o News 2
      o News 3
* Topic E
      o News 1
      o News 2
      o News 3
      o News 4
* Topic F
      o News 1
      o News 2
      o News 3
      o News 4
      o News 5
</div>

如果用戶選擇2列，他們會看到以下30行“數據”分為2組，每組包含DIV標簽。 巧合的是，這種情況很好地解決了：

<div id="Columns2Group1of2">        <div id="Columns2Group2of2">
* Topic A                           * Topic D
      o News 1                          o News 1
      o News 2                          o News 2
      o News 3                          o News 3
* Topic B                           * Topic E
      o News 1                          o News 1
      o News 2                          o News 2
      o News 3                          o News 3
      o News 4                          o News 4
* Topic C                           * Topic F
      o News 1                          o News 1
      o News 2                          o News 2
      o News 3                          o News 3
      o News 4                          o News 4
      o News 5                          o News 5
</div>                              </div>

如果用戶選擇3列，他們會看到以下30行“數據”分為3組，每組包含DIV標簽。 間距開始變得棘手，我願意接受建議。

<div id="Columns3Group1of3">        <div id="Columns3Group2of3">        <div id="Columns3Group3of3">
* Topic A                           * Topic C                           * Topic E
      o News 1                          o News 1                            o News 1
      o News 2                          o News 2                            o News 2
      o News 3                          o News 3                            o News 3
* Topic B                               o News 4                            o News 4
      o News 1                          o News 5                        * Topic F
      o News 2                      * Topic D                               o News 1
      o News 3                          o News 1                            o News 2
      o News 4                          o News 2                            o News 3
</div>                                  o News 3                            o News 4
                                    </div>                                  o News 5
                                                                        </div>

如果用戶選擇4列，他們會看到以下30行“數據”分為4組，每組包含DIV標簽。 同樣，我甚至不知道如何為我的插圖手動分配它，但是讓孩子們留在父母身邊很重要。

<div id="Columns4Group1of4">        <div id="Columns4Group2of4">        <div id="Columns4Group3of4">        <div id="Columns4Group4of4">
* Topic A                           * Topic C                           * Topic D                           * Topic F
      o News 1                        o News 1                            o News 1                            o News 1
      o News 2                        o News 2                            o News 2                            o News 2
      o News 3                        o News 3                            o News 3                            o News 3
* Topic B                             o News 4                          * Topic E                             o News 4
      o News 1                        o News 5                            o News 1                            o News 5
      o News 2                      </div>                                o News 2                          </div>
      o News 3                                                            o News 3
      o News 4                                                            o News 4
</div>                                                                  </div>

Answer 1

這應該做的伎倆：

$result = mysql_query("SELECT * FROM News");
$topicname = '';

// open list of topics
echo '<ul>';

// loop through topics
while($row = mysql_fetch_array($result)) {
    if (!$row['TopicID']) {
        // fake topic name for unsorted stuff
        $row['TopicName'] = 'Sort Me';
    }
    if ($topicname != $row['TopicName']) {
        if($topicname != ''){
            // had a topic name, means we opened a list
            // that hasn't been closed, close it.
            echo '</ul>';
        }
        // print this topic and open the list of articles
        echo '<li>' . $row['TopicName'] . '</li><ul>';
        // update the current topic to be this TopicName
        $topicname = $row['TopicName']; 
    }
    // the news item
    echo '<li>' . $row['NewsID'] . '"</li>';
}
if($topicname != ''){
    // we saw at least one TopicName, we need to close
    // the last open list.
    echo '</ul>';
}
// end topic list
echo '</ul>';

我認為你真正的問題是你每次打開兩個列表，但只關閉一個（甚至移動列表中的最后一個塊）。

---

對於（新）問題的第二部分：

我要指出的是，對於較大的列表（比如超過300個項目），我在制作關於將列表存儲在內存中並進行兩次迭代而不僅僅是查詢所需的計數時所做的權衡會轉向另一種方式。 也就是說，下面的解決方案將所有內容放入內存中，然后再次迭代以將其打印出來; 另一種方法是運行兩個查詢，一個查找唯一的TopicNames，另一個查找列表中的項目總數。

另外，對於顯示，你真的想要解決布局的一些優化，我會天真地做這個，並且每列只做一個（大致）相同數量的主題，當除法不成功時，這將向左重。 你會看到你可以在哪里調整或替換一些代碼來獲得不同的（並且更好的？）結果。

$columns = // user specified;

$result = mysql_query("SELECT * FROM News");
$num_articles = 0;

// $dataset will contain array( 'Topic1' => array('News 1', 'News2'), ... )
$dataset = array();
while($row = mysql_fetch_array($result)) {
    if (!$row['TopicID']) {
        $row['TopicName'] = 'Sort Me';
    }
    $dataset[$row['TopicName']][] = $row['NewsID'];
    $num_articles++;
}

$num_topics = count($dataset);

// naive topics to column allocation
$topics_per_column = ceil($num_topics / $columns);

$i = 0; // keeps track of number of topics printed
$c = 1; // keeps track of columns printed
foreach($dataset as $topic => $items){
    if($i % $topics_per_columnn == 0){
        if($i > 0){
            echo '</ul></div>';
        }
        echo '<div class="Columns' . $columns . 'Group' . $c . '"><ul>';
        $c++;
    }
    echo '<li>' . $topic . '</li>';
    // this lists the articles under this topic
    echo '<ul>';
    foreach($items as $article){
        echo '<li>' . $article . '</li>';
    }
    echo '</ul>';
    $i++;
}
if($i > 0){
    // saw at least one topic, need to close the list.
    echo '</ul></div>';
}