首页 > 其他 > 详细

zTree变异篇:如何让同级树节点平铺而非垂直显示

时间:2014-11-21 15:37:07      阅读:2104      评论:0      收藏:0      [点我收藏+]

昨天有一个zTree的使用者在实际的项目中有着这样一个特殊的需求,要求同级树节点能够水平显示,根据设定的宽度自动换行,效果图如下所示:

 bubuko.com,布布扣

 

通过在浏览器调试模式下观察其同级节点的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 属性的值。

 

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

zTree变异篇:如何让同级树节点平铺而非垂直显示

原文:http://www.cnblogs.com/spring_wang/p/4112921.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!