Question

我有一堆分层数据，我试图用HTML，JS和JQuery来表示。我决定使用左浮动div容器系统而不是网格系统来使代码更容易递归生成。问题是我有一些限制;例如，我希望树的宽度完全适合客户端窗口。我可以通过动态设置每个div在JS中创建时的宽度来实现这一点。通过计算一个元素所具有的兄弟姐妹的数量并以该兄弟姐妹的数量潜水100来计算宽度的百分比。

这种方法的问题在于它浪费了大量宝贵的空间。即使一个元素没有子元素，它也会获得与其所有兄弟元素相同的空间量。一旦你达到4级或5级，空间就开始成为一种严肃的商品。

我尝试过的另一种方法是让浏览器自动调整大小。这真的很好，因为没有比它需要更多的空间。这里的问题是我失去了对动态大小的控制;我需要能够放大和缩小，并且正如我之前提到的那样以100％的宽度开始。此外，当树长度超出页面宽度时，溢出的div正在向下移动。我需要它们水平滚动页面。

所以我的问题是......我有哪些选项可以确保我的树形结构节省空间，完全适合客户端宽度，并允许通过动态调整大小进行缩放？

以下是分层数据的屏幕截图：

https://www.dropbox.com/sh/xl239fthmxss2dw/yhH_TUYq93

以下是我正在生成的代码类型的简化示例：

<div id="map" class="tag-container">
    <div class="tag">Level 0 data</div>
    <div class="tag-container">
        <div class="tag">Level 1 data</div>
        <div class="tag-container">
            <div class="tag">Level 2 data</div>
            <div class="tag-container">
                <div class="tag">Level 3 data</div>
            </div>
            <div class="tag-container">
                <div class="tag">Level 3 data</div>
                <div class="tag-container">
                    <div class="tag">Level 4 data</div>
                </div>
            </div>
        </div>
        <div class="tag-container">
            <div class="tag">Level 2 data</div>
            <div class="tag-container">
                <div class="tag">Level 3 data</div>
            </div>
            <div class="tag-container">
                <div class="tag">Level 3 data</div>
                <div class="tag-container">
                    <div class="tag">Level 4 data</div>
                </div>
            </div>
        </div>
    </div>
</div>

这是相关的CSS：

.tag-container {
    padding: 0px;
    float: left;
    box-sizing: border-box;
    display: inline;
    width: 33.333%
}

.zoom {
    cursor: pointer
}

body {
    background-color: azure;
    overflow: scroll
}

Answer 1

如果你不害怕使用css3，这是我的建议：

添加div分组标记 - 处于同一级别的容器。上面的标记看起来像这样：

<div id="map" class="tag-container">
        <div class="tag">Level 0 data</div>
        <div class="tag-container">
            <div class="tag">Level 1 data</div>
            <div class="tag-container-group">
                <div class="tag-container">
                    <div class="tag">Level 2 data</div>
                    <div class="tag-container-group">
                        <div class="tag-container">
                            <div class="tag">Level 3 data</div>
                        </div>
                        <div class="tag-container">
                            <div class="tag">Level 3 data</div>
                            <div class="tag-container-group">
                                <div class="tag-container">
                                    <div class="tag">Level 4 data</div>
                                </div>
                            </div>
                    </div>
                </div>
                </div>
            <div class="tag-container">
                <div class="tag">Level 2 data</div>
                <div class="tag-container-group">
                    <div class="tag-container">
                        <div class="tag">Level 3 data</div>
                    </div>
                    <div class="tag-container">
                        <div class="tag">Level 3 data</div>
                        <div class="tag-container-group">
                            <div class="tag-container">
                                <div class="tag">Level 4 data</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

然后使用以下CSS

.tag {
    text-align: center;
    border: 1px solid #aaa;
}
.tag-container-group {
    /* Firefox */
    display:-moz-box;
    -moz-box-orient:horizontal;

    /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-orient:horizontal;

    /* W3C */
    display:box;
    box-orient:horizontal;
}
.tag-container-group > .tag-container {
    width: 1px;
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    -ms-flex:1.0; /* Internet Explorer 10 */
    box-flex:1.0;
}

我没有通过浏览器测试过这个。仅限铬合金。当然它会在旧的IE版本中瘫痪，但也许这是你愿意做的权衡吗？或者您可以考虑使用display: inline-table替代样式表。

如果您希望节点相对于其内容的大小，则应删除width: 1px

中的.tag-container-group > .tag-container

我有什么选项来显示分层数据？

1 个答案: