如果列标签文本的宽度大于列宽度,则标签文本将被截断。
由于某些文本较长,因此增加列宽不是很好。
如何使文字自动换行成多行? header 高度应由最大列高度确定。
我发现的唯一解决方案是
jQgrid: multiple column row headers
但这不会实现文字自动换行。
如何实现标题文本的自动换行?
更新。我尝试了Oleg样式的字符和自动换行。
角色换行
th.ui-th-column div{
word-wrap: break-word; /* IE 5.5+ and CSS3 */
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
overflow: hidden;
height: auto;
vertical-align: middle;
padding-top: 3px;
padding-bottom: 3px
}
仅显示第二行的一半。第三行根本没有显示:
自动换行
th.ui-th-column div{
white-space:normal !important;
height:auto !important;
padding:2px;
}
禁用换行列的列大小调整。在那些列上,将鼠标图标移动到列分隔符上,鼠标光标不会更改为sizer。包裹的列无法调整大小。
如何解决这些问题?
更新2
我尝试了字符换行(Oleg答复中的最后一个示例)。
我发现如果减小列宽以使标题中出现更多行,则会出现问题:
最佳答案
在带字符换行的示例中,您忘记了在!important
设置之后使用height: auto
。
我同意在old answer的演示中确实存在列大小调整器的问题。所以我改善了。此外,我尝试描述在哪些情况下使用字符换行而不是单词换行可能很重要。
带有自动换行的新演示为here。代码如下:
var grid = $("#list"), headerRow, rowHight, resizeSpanHeight;
grid.jqGrid({
...
});
// get the header row which contains
headerRow = grid.closest("div.ui-jqgrid-view")
.find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels");
// increase the height of the resizing span
resizeSpanHeight = 'height: ' + headerRow.height() +
'px !important; cursor: col-resize;';
headerRow.find("span.ui-jqgrid-resize").each(function () {
this.style.cssText = resizeSpanHeight;
});
// set position of the dive with the column header text to the middle
rowHight = headerRow.height();
headerRow.find("div.ui-jqgrid-sortable").each(function () {
var ts = $(this);
ts.css('top', (rowHight - ts.outerHeight()) / 2 + 'px');
});
它使用以下CSS
th.ui-th-column div {
white-space: normal !important;
height: auto !important;
padding: 2px;
}
并产生以下图片
(我在第一列的每个字符之后都添加了
<br/>
,以使文本“Inv No”放置在多行上)。一切看起来都很好,但是在某些情况下,您可以在列标题中一个很长的单词。某些语言(例如德语)有时会生成很长的单词,例如“Softwareberetstellungsform”(由许多单词组成)。在示例中,它是“软件”,“软件”和“表单”。在其他语言中,同样的情况也是可能的,但是这种情况并不常见。结果,将收到以下(不太完美的)图片(请参阅here演示):
您会看到文本“AmountInEUR”,“TaxInEUR”和“TotalInEUR”已被截断。可以在列文本中包括手动线制动器(
<br/>
),也可以使用我在the answer中描述过的字符包装来包装。如果我们仅将上述th.ui-th-column div
的CSS更改为以下内容th.ui-th-column div {
word-wrap: break-word; /* IE 5.5+ and CSS3 */
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
overflow: hidden;
height: auto !important;
vertical-align: middle;
}
我们将收到以下结果(请参见here演示)
顺便说一下,如果文本包含空格,字符换行在某些浏览器(例如Google Chrome)中可以作为自动换行(!!!)。因此the demo会像上图一样在Google Chrome,Safari,Opera和Firefox中显示,并带有自动换行,但是IE(包括IE9)中的相同演示将显示为
因此,没有绝对完美的方法,但是对于所有现代Web浏览器(Internet Explorer(版本<10)除外),字符换行都具有一些优势。在列文本中使用
<br/>
或使用CSS(取决于当前使用的Web浏览器)可以使解决方案变得更好。
关于jquery-ui - 如何在jqgrid中将单列标题文本包装为多行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7246506/