我有什麼選擇來顯示分層數據？

我有一堆分層數據，我試圖用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

精美的作品。謝謝！ –

我有什麼選擇來顯示分層數據？

回答

相關問題