如何在jqgrid中将单列标题文本包装为多行 [英] How to wrap single column header text into multiple lines in jqgrid

问题描述

如果列标签文本的宽度大于列宽度，则标签文本将被截断. 由于某些文本很长，因此增加列宽不是很好. 如何使文字自动换行成多行?标头高度应由最大列高度决定.

If column label text is wider than column width, label text is truncated. Increasing column width is not nice since some texts are long. How to make text to word wrap into multiple lines? Header height should be determined by maximum column height.

我发现的唯一解决方案是

Only solution which I found is

jQgrid:多个列行标题

但这不会实现文字自动换行.

but this does not implement word wrap of text.

如何实现标题文本的自动换行?

How to implement word wrap of header text ?

更新.我尝试了Oleg样式的字符和自动换行.

Update. I tried Oleg styles for character and word wrap.

字符换行

    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

}

仅显示第二行的一半.第三行完全没有显示:

shows only half of second line. Third line is not shown at all:

自动换行

  th.ui-th-column div{
   white-space:normal !important;
   height:auto !important;
   padding:2px;
   }

禁用换行列的列大小调整.在那些列上，将鼠标图标移动到列分隔符上，鼠标光标不会更改为sizer.包裹的列无法调整大小.

disables column resize for wrapped columns. On those columns moving mouse icon to column divider mouse cursor does not change to sizer. Wrapped columns cannot resized.

如何解决这些问题?

更新2

我尝试了自动换行(Oleg答复中的最后一个示例). 如果缩小列宽，以便在标题中显示更多行，我发现了问题:

I tried character wrap (last sample in Oleg reply). I found issues if column width is decreased so that more lines appear in header:

1. 如果在列分隔符的底部拖动，则无法调整列的大小:调整大小时不会增加调整大小的高度.

1. Column cannot resized if dragging in bottom of column divider: resizer height is not increased on resize.

在IE9中，标头高度增加不足:调整大小后，最后一个标头行不可见.在fireFox中，不会发生此问题.

In IE9 header height increase is not sufficient: last header line is not visible after resize. In fireFox this issue does not occur.

推荐答案

在您使用字符换行的示例中，您忘记了在height: auto设置后使用!important.

In your example with character wrapping you forgot to use !important after the height: auto setting.

我同意我的

I agree that the problem with column resizer really exists in my demo from the my old answer. So I improved it. Moreover I try to describe in which situations can be important to use character wrapping instead of word wrapping.

带有自动换行的新演示位于此处.代码如下:

The new demo with the word wrapping is here. the code is the following:

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"排成多行).

(I included <br/> after every character in the first column to make the text "Inv No" by placed on many rows).

一切看起来都很好，但是在某些情况下，您可以在列标题中一个很长的单词.某些语言(例如德语)有时会构建很长的单词，例如"Softwareberetstellungsform"，其中包含许多单词.在示例中，它是软件"，"bereitstellung"和表单".在其他语言中，同样的情况也是可能的，但是这种情况并不常见.因此，您将收到以下(不太完美的)图片(请参见演示此处):

Everything look very good, but it can be some situations that you can one very long word in the column header. Some languages like German build sometimes long words like "Softwareberetstellungsform" which consist from many words. In the example it was "Software", "bereitstellung" and "form". In other languages the same situation is also possible, but is not so frequently. As a result one will receive the following (less perfect) picture (see the demo here):

您会看到文本"AmountInEUR"，"TaxInEUR"和"TotalInEUR"已被截断.一个可以在列文本中包括手动线制动器(<br/>)，也可以使用我在

You can see that the texts "AmountInEUR", "TaxInEUR" and "TotalInEUR" are cut off. One can either include manual line brakes (<br/>) in the column text or use character wrapping which I described in the answer. If we change only the described above CSS for th.ui-th-column div to the following

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;
}

我们将收到以下结果(请参见演示此处 )

we will receive the following results (see the demo here)

在某些浏览器(例如Google Chrome浏览器)中，如果文本包含空格，则字符换行可以作为自动换行(!!!).因此，该演示将在Google Chrome，Safari，Opera， Firefox如上图所示，带有自动换行符，但IE(包括IE9)中的相同演示将被视为

By the way the character wrapping work in some browsers like Google Chrome as word wrapping (!!!) if the text contains spaces. So the demo will be displayed in Google Chrome, Safari, Opera, Firefox like in the picture above with the word wrapping, but the same demo in IE (inclusive IE9) will be seen as

所以没有绝对完美的方法，但是对于所有现代的Web浏览器，除了Internet Explorer(版本<10)以外，字符换行都具有一些优点.在列文本中使用<br/>或使用CSS(取决于当前使用的Web浏览器)可以使解决方案变得更好.

So no way is absolutely perfect, but the character wrapping have some advantages for all modern web browsers with the exception Internet Explorer (version < 10). The usage of <br/> inside of column text or the usage of CSS which depend on the currently used web browser can make the solution much better.

这篇关于如何在jqgrid中将单列标题文本包装为多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！