仅由 CSS 和 PHP 使用嵌套无序列表结构的紧凑树答案

【问题标题】：Compact tree using nested unordered lists structure only by CSS and PHP仅由 CSS 和 PHP 使用嵌套无序列表结构的紧凑树
【发布时间】：2020-09-21 20:51:19
【问题描述】：

我有一个 PHP 算法（来自 here），它从 db 表中创建图表中的以下结构，例如：

id name parent
1 company 0
2 Sales department 1
3 Sales unit I 2
4 Sales unit II 2
5 Purchase Department 1
6 Controlling 1
7 Controlling unit I 6

这是树结构的 HTML 等价物（在此阶段忽略 CSS）

<ul class="tree">
    <li>Company
        <ul>
            <li>Purchase Department</li>
            <li>Controlling
               <ul>
                  <li> Controlling unit I</li>
               </ul>
            </li>
            <li>Sales Department
                <ul>
                    <li>Sales Unit I</li>
                    <li>Sales Unit II</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

PHP 算法是一种递归算法，与下面的非常相似：

function generateTree ($parent) {
    global $arrPCat, $arrCat;
    if (array_key_exists($parent, $arrPCat)) {
        echo '<ul' . ($parent == 0 ? ' class="tree"' : '') . '>';
        foreach ($arrPCat[$parent] as $arrC) {
            echo '<li>' . $arrC['name'] . '</li>';
            generateTree($arrC['id']);
        }
        echo '</ul>';
    }
}

上面的树很宽，我打算像下图一样压缩它（再次请忽略 CSS）：

这是我从here借来的HTMl代码：

<ul class="orgchart">
            <li class="root">
                <div class="nodecontent">President</div>
                <ul>
                    <li class="node">
                        <div class="nodecontent">Vice President <br/> Account Services</div>
                        <ul>
                            <li class="vertical">
                                <div class="nodecontent">Account Supervisor</div>
                                <ul>
                                    <li class="leaf">
                                        <div class="nodecontent">Account Executive</div>
                                    </li>
                                    <li class="leaf">
                                        <div class="nodecontent">Account Executive</div>
                                    </li>
                                </ul>
                            </li>
                            <li class="leaf">
                                <div class="nodecontent">Account Supervisor</div>
                            </li>
                        </ul>
                    </li>
                    <li class="vertical">
                        <div class="nodecontent">Vice President <br/> Creative Services</div>
                        <ul>
                            <li class="leaf">
                                <div class="nodecontent">Art / Copy</div>
                            </li>
                            <li class="leaf">
                                <div class="nodecontent">Production</div>
                            </li>
                        </ul>
                    </li>
                    <li class="vertical">
                        <div class="nodecontent">Vice President <br/> Marketing Services</div>
                        <ul>
                            <li class="leaf">
                                <div class="nodecontent">Media</div>
                            </li>
                            <li class="leaf">
                                <div class="nodecontent">Research</div>
                            </li>
                        </ul>
                    </li>
                    <li class="vertical">
                        <div class="nodecontent">Vice President <br/> Management Services</div>
                        <ul>
                            <li class="leaf">
                                <div class="nodecontent">Accounting</div>
                            </li>
                            <li class="leaf">
                                <div class="nodecontent">Purchasing</div>
                            </li>
                            <li class="leaf">
                                <div class="nodecontent">Personnel</div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

在此示例中，叶节点仅是垂直的。但是，其他节点巧妙地被node、leaf 和vertical 分类。如何修改上面的 PHP 算法以有效地获得与这个紧凑算法相同的结构。节点在我的情况下可能有 1000 个节点，因此有效的算法是关键。抱歉问了这么长的问题！

【问题讨论】：

您将使用什么标准将node、vertical 或leaf 类添加到列表项？
感谢@KIKOSoftware 如果一个节点是一个终端节点，那么所有的叶子都应该被归类为叶子垂直。否则，它应该只是叶子（没有垂直）。这有帮助吗？

标签： php html css mysql

【解决方案1】：

如果您检查当前元素的所有子元素是否都没有子元素怎么办？类似的东西：

    $vertical = true;
    foreach ($arrPCat[$parent] as $arrC) {
       if (array_key_exists($arrC['id'], $arrPCat)) {
           $vertical = false;
           break;
       }
    }
    if($vertical){
        //echo vertical ul
    }

【讨论】：