将无序列表显示为水平二叉树答案

【问题标题】：Display unordered list as a horizontal binary tree将无序列表显示为水平二叉树
【发布时间】：2009-10-31 14:51:49
【问题描述】：

我在无序列表中有一个二叉树，如下所示：

<ul>
<li>1
    <ul> 
        <li>2
            <ul> 
                <li>4
                    <ul> 
                        <li>8</li> 
                        <li>--</li>
                    </ul> 
                </li> 
                <li>5</li> 
            </ul> 
        </li> 
        <li>3
            <ul> 
                <li>6</li> 
                <li>7</li> 
            </ul> 
        </li> 
    </ul> 
</li>

其中 -- 是一个空格（区分左/右孩子）。

它显示为经典的无序列表。但这很难阅读和浏览。我需要一个看起来像这样的水平树：

http://www.knowledgerush.com/wiki_image/d/df/Binary_tree.png

节点之间可以有或没有线。

我的问题是 - 这可以单独通过 html/css 完成，还是我需要为此使用 javascript？

【问题讨论】：

标签： javascript css list binary-tree

【解决方案1】：

听起来是个好主意，但我认为很难实现。

线条的角度各不相同，所以不要在没有特殊逻辑的情况下进行（仅通过 HTML/CSS 无法实现）
子节点似乎与其他父节点占据相同的垂直空间（参见例如节点 5 和 7），而其他节点则没有（参见节点 4 和 5）。这也是一些特殊的排序。

无论如何，您尝试将每个 LI 设置为向左浮动并具有 50% 的宽度，因此每个新级别都会越来越窄 - 还没有尝试过。

此外，您可能会发现这个插件很有趣，虽然它不使用 UL 而是使用 DIV 并使用 jQuery：http://www.ajaxupdates.com/jquery-binary-tree-plugin/

【讨论】：

我试过这个插件 - 它完全没用，它只是按 div 的顺序显示它，没有任何逻辑。我会尝试 50% 的浮动和宽度...如果它不起作用，我将不得不在 javascript 中写一些东西
好吧，50% 和浮动的作品......但是在 4-6 级之后，宽度变得非常窄......所以我可能不得不使用相当大的页面（或者更确切地说是一个包含溢出的 div :scrollable)
是的，可用空间将呈指数级减少...另一方面，如果您需要大量空间，请考虑将其作为图像提供，然后在服务器端对其进行预处理。或者甚至是PDF。对于分辨率为@ 1024x768 的用户来说，拥有一个巨大的宽页面并不好:)
是的，预处理可能是最好的主意......我需要这个主要是为了让用户看到他们的传销下线报告 - 所以一些额外的处理时间不会受到伤害。

【解决方案2】：

不久前我做了一些与此非常相似的事情，并检查了各种可用的选项。我希望能够在 AJAX 页面上实时更新图表，并最终使用 Javascript 代码生成和修改 SVG 图形。 Firefox 对结果页面的处理非常好并且响应迅速，我并不担心 IE 根本无法处理它。

从那时起，我们对HTML5 进行了更多开发，尤其是新的canvas tag。这听起来很适合这类事情，可能值得一试。

祝你好运！

【讨论】：

是的，我一直渴望尝试 HTML5 和 canvas 标签 - 但是我需要它在每台机器上的每个浏览器中工作，所以......