JQGrid中的列换行问题

Question

有人知道如何在JQGrid中包装列名。 请查看我的JSON代码如下：

colModel：[             {name：'RequestID'，index：'CreditRequest.CreditRequestID'，width：100，align：'left'}，.....

参考上面的代码，如果内容的大小超过了我想要包装的大小，则需要进行换行。有什么想法或评论吗？

- SARAVAN

---

所以你想要包装列标题名称？你希望它动态更改还是只是有非常长的名称？如果您发布更多信息，可能会有所帮助... - Justin Ethier

Answer 1

只需在您自己的CSS文件中引用它即可。

.ui-jqgrid tr.jqgrow td {
    height: 50px;
    white-space: normal;
}

只要你的CSS文件在jqGrid.css文件后面被列在头部，它就会覆盖它。

- Christine

Answer 2

不管价值如何，这里是标题行的内容：

.ui-jqgrid .ui-jqgrid-htable th div, .ui-jqgrid-sortable  {
    height:auto;
    overflow:hidden;
    white-space:normal !important;
}

- gsaslis

---

页面上最佳解决方案 - FastTrack

Answer 3

您需要查看应用于jqGrid th列标题的具体类。在我的情况下，我有以下内容：ui-th-div-ie ui-jqgrid-sortable 进一步查看后，我发现有两个CSS问题：

1. white-space: normal
2. height: 16px

这两个CSS属性都在ui.jqgrid.css中定义。意识到我对此网格有特定要求，不想影响其他实现，我提出了以下解决方案：

$(".ui-jqgrid-sortable").css('white-space', 'normal');
$(".ui-jqgrid-sortable").css('height', 'auto');

- R Bremner

Answer 4

以下是一些步骤，可实现单元格中的文字自动换行。

打开 ui.jqgrid.css 文件

搜索 .ui-jqgrid tr.jqgrow td

将 “white-space: pre;” 改为 “white-space: normal;”

要在单元格中进行换行：

.ui-jqgrid tr.jqgrow td {
    white-space: normal !important;
    height:auto;
    vertical-align:text-top;
    padding-top:2px;
}

对于列标题

.ui-jqgrid .ui-jqgrid-htable th div {
        height:auto;
    overflow:hidden;
    padding-right:4px;
    padding-top:2px;
    position:relative;
    vertical-align:text-top;
    white-space:normal !important;
}

- anitha

Answer 5

您可以将 th 标签的 white-space css 属性设置为 normal。使用 JQuery 应该如下：

  $('.ui-jqgrid .ui-jqgrid-htable th div').css('white-space', 'normal');

- Piotr Pawłowski

---

嗨， 这对我不起作用。还有其他建议吗？我非常需要它。 - SARAVAN

Answer 6

请使用这个CSS。

   .ui-jqgrid tr.jqgrow td {
        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
    }

- Yasser Shaikh

Answer 7

这在 jqGrid 4.4.4 中有效。

.ui-jqgrid .ui-jqgrid-htable th div
{
    white-space:normal;
    height:auto !important;
}

- RayLoveless

Answer 8

你不能只是放一个<BR/>标签，虽然它可以折行，但它不能正确地调整高度。

- Nutshell

Answer 9

确保换行最简单的方法是在列名中放置<BR/>标签，无论何时需要换行。例如，ClientPrimaryName可以写成Client<BR/>PrimaryName，这样它实际上呈现为：

Client
PrimaryName

- SARAVAN

---

添加一个换行符，但仍不会使单元格垂直扩展。 - RayLoveless