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

我有一堆分层数据，我试图用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 
}

来源

2013-07-24 Christian Andrew Boyer

能'显示：直列table'解决问题了吗？ http://www.brunildo.org/test/inline-block2.html 我不确定我是否完全理解你想如何布局树。 – Anders

这似乎已经过时...无论如何，我添加了一个树的外观截图。每个容器都有一个紫色的“标签”及其所有子容器都有自己的标签。所有标签都向左漂移。 –

如果你不害怕使用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

来源

2013-07-25 22:29:08 Anders

精美的作品。谢谢！ –

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

回答

相关问题