zTree變異篇：如何讓同級樹節點平鋪而非垂直顯示

昨天有一個zTree的使用者在實際的項目中有着這樣一個特殊的需求，要求同級樹節點能夠水平顯示，根據設定的寬度自動換行，效果圖如下所示：

 

 

通過在瀏覽器調試模式下觀察其同級節點的css為：

li {
  display: list-item;
  text-align: -webkit-match-parent;
}

 

這個display屬性就注定了其節點都會像item一樣垂直顯示的。我們知道了這一點所以問題解決方案就出來了。

解決思路：

1、徹底修改zTree樹所配備的zTreeStyle.css文件；

2、打開文件主要修改前第二、三行；

1）、需要給zTree設定一個固定寬度且能夠支持超出寬度值自動換行，於是我們修改后的zTree類的樣式為：

.ztree {
   margin:0; 
   width:300px; 
   padding:5px; 
   color:#333; 
   word-break: break-all; 
   word-wrap:break-word;
}

 

2）、需要設置節點的display屬性為平鋪模式

.ztree li{
   padding:0; 
   margin:0; 
   list-style:none;  
   display:inline; 
   line-height:14px; 
   text-align:left;  outline:0;
}

 

display:inline;這個就是表示平鋪模式了的。

具體display屬性值的特性請參考下面的表格：

 

值	描述
none	此元素不會被顯示。
block	此元素將顯示為塊級元素，此元素前后會帶有換行符。
inline	默認。此元素會被顯示為內聯元素，元素前后沒有換行符。
inline-block	行內塊元素。（CSS2.1 新增的值）
list-item	此元素會作為列表顯示。
run-in	此元素會根據上下文作為塊級元素或內聯元素顯示。
compact	CSS 中有值 compact，不過由於缺乏廣泛支持，已經從 CSS2.1 中刪除。
marker	CSS 中有值 marker，不過由於缺乏廣泛支持，已經從 CSS2.1 中刪除。
table	此元素會作為塊級表格來顯示（類似 <table>），表格前后帶有換行符。
inline-table	此元素會作為內聯表格來顯示（類似 <table>），表格前后沒有換行符。
table-row-group	此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。
table-header-group	此元素會作為一個或多個行的分組來顯示（類似 <thead>）。
table-footer-group	此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。
table-row	此元素會作為一個表格行顯示（類似 <tr>）。
table-column-group	此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。
table-column	此元素會作為一個單元格列顯示（類似 <col>）
table-cell	此元素會作為一個表格單元格顯示（類似 <td> 和 <th>）
table-caption	此元素會作為一個表格標題顯示（類似 <caption>）
inherit	規定應該從父元素繼承 display 屬性的值。

 

通過上面的設置就可以讓同級節點平鋪顯示了的！具體的樣式可以自己調整寬度和節點的固定寬度值來加以控制！