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 属性的值。

 

通过上面的设置就可以让同级节点平铺显示了的！具体的样式可以自己调整宽度和节点的固定宽度值来加以控制！