在表格中显示父子数据答案

【问题标题】：Display Parent-Child data in Table在表格中显示父子数据
【发布时间】：2015-06-14 09:10:08
【问题描述】：

我从 mysql 获取了一些数据，我需要以表树格式显示数据，但它不起作用。但是我尝试在列表的帮助下显示它，但实际上需要表格格式。

<?php
session_start();
    include 'dbconn.php';
    $conn = mysql_connect($dbhost, $dbuser, $dbpass);
    mysql_connect('localhost','root','root');
    mysql_select_db('cms');
    //select all rows from the main_menu table
    $result = mysql_query("select id, label as title, parent as parentid,link from pages");

    //create a multidimensional array to hold a list of menu and parent menu
    $menu = array(
        'menus' => array(),
        'parent_menus' => array(),

    );

    //build the array lists with data from the menu table
    while ($row = mysql_fetch_assoc($result)) {
        //creates entry into menus array with current menu id ie. $menus['menus'][1]
        $menu['menus'][$row['id']] = $row;
        //creates entry into parent_menus array. parent_menus array contains a list of all menus with children
        $menu['parent_menus'][$row['parentid']][] = $row['id'];
    }

    // Create the main function to build milti-level menu. It is a recursive function.  
    function buildMenu($parent, $menu) {
    $html = "";
    $char=" ";
    if (isset($menu['parent_menus'][$parent])) {
        foreach ($menu['parent_menus'][$parent] as $menu_id) {
            if (!isset($menu['parent_menus'][$menu_id])) {
                $html .= "<li>".$menu['menus'][$menu_id]['title']."</li>";
            }
            if (isset($menu['parent_menus'][$menu_id])) {
                $html .= "<li>".$menu['menus'][$menu_id]['title'];
                $html .= "<ul>";
                $html .= buildMenu($menu_id, $menu);
                $html .= "</ul>";
                $html .= "</li>";
            }
        }
    }
    return $html;
    }
    echo buildMenu(0, $menu);
    ?>

我得到的输出是：

我稍微修改了 buildMenu 函数：我需要在表格中缩进我得到的只是一列

function buildMenu($parent, $menu) {
    $html = "";
    $char=" ";
    $html.="<table border='3px'>";
    if (isset($menu['parent_menus'][$parent])) {
        foreach ($menu['parent_menus'][$parent] as $menu_id) {
            if (!isset($menu['parent_menus'][$menu_id])) {
                $html .= "<tr><td>".$menu['menus'][$menu_id]['title']."</td></tr>";
            }
            if (isset($menu['parent_menus'][$menu_id])) {
                $html .= "<tr><td>".$menu['menus'][$menu_id]['title'];
                $html .= "<tr><td>";
                $html .= buildMenu($menu_id, $menu);
                $html .= "</td></tr>";
                $html .= "</td></tr>";
            }
        }
    }
        $html.="</table>";
    return $html;
}

并得到如下输出：

我的目标是得到这样的结构：

【问题讨论】：

你得到的输出有什么问题？困扰你的只是视觉外观吗？它似乎是数据的正确表示
先生，实际上是的，我需要的是以缩进方式显示的表格，这是我无法实现的。

标签： php html css list html-table

【解决方案1】：

感谢大家的努力：

这是我期待的代码

我的最终 buildMenu 函数：

echo $html="<table class='test2'><tr data-tt-id='0'><td>Root</td></tr>";

function buildMenu($parent, $menu) {
    $char=" ";
    if (isset($menu['parent_menus'][$parent])) {



   foreach ($menu['parent_menus'][$parent] as $menu_id) {
            //echo "id:".$menu['menus'][$menu_id]['id']."par:".$menu['menus'][$menu_id]['parentid'];
            if (!isset($menu['parent_menus'][$menu_id])) {
                $html .= "<tr data-tt-id='".$menu['menus'][$menu_id]['id']."' data-tt-parent-id='".$menu['menus'][$menu_id]['parentid']."'><td>".$menu['menus'][$menu_id]['title']."</td></tr>";
            }
            if (isset($menu['parent_menus'][$menu_id])) {
                $html .= "<tr data-tt-id='".$menu['menus'][$menu_id]['id']."' data-tt-parent-id='".$menu['menus'][$menu_id]['parentid']."'><td>".$menu['menus'][$menu_id]['title'];
                $html .= "<td>";
                $html .= buildMenu($menu_id, $menu);
                $html .= "</td>";
                $html .= "</td></tr>";
            }
        }
    }
    return $html;
}

echo buildMenu(0, $menu);
echo "</table>";

最终结果：1：折叠树 2：展开树

如果有人遇到同样的问题，希望这会有所帮助。

是的，对于 TreeTable，我使用了 Github 插件 Github: TreeTable Plugin

【讨论】：

【解决方案2】：

好吧，如果它只是看起来，然后相应地设置表格的样式以使您的缩进正确，例如

td {padding-left:10px}

我相信语义上“正确”的方法是使用项目符号列表样式（作为您的第一个示例），并根据需要删除项目符号和样式

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul li {
    padding-left: 15px;
}

【讨论】：