JqGrid中的文本换行问题

Question

您能让文本行在JqGrid中换行吗？我查看了一下，但找不到任何内容。

- beakersoft

Answer 1

尝试以下CSS：

    .ui-jqgrid tr.jqgrow td {
        white-space: normal !important;
    }

使用 jqGrid 3.6 对我有效。

---

正如 N30 指出的那样，jqGrid 4.0 现在支持一个 cellattr colModel 选项，它可以允许更细粒度地控制文本换行。来自他的示例：

cellattr: function (rowId, tv, rawObject, cm, rdata) { 
    return 'style="white-space: normal;"';
}

- Justin Ethier

Answer 2

使用 jQGrid 4.0，更好的方法是在 colmodel 中使用 cellattr，例如：

colModel: [
            { name: 'ClientName', label: 'Client', index: 'ClientName', width: 150, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' } },

            .... other columns

            ]

通过这种方式，您可以将包装样式应用于单个列，而不必使用 !important。

- N30

Answer 3

我在处理表头时遇到了这个问题，后来发现我需要下面的内容才能解决IE中的问题。请注意，这仅适用于表头，而不是单元格。问题在于这可能会影响更多的地方（我相信我以后还会发现），但是您可以随时优化css选择器和/或使它们引用特定的#tableIdName或某些类，以便您可以根据自己的需求进行选择。

.ui-jqgrid .ui-jqgrid-htable th div {
overflow: visible !important;
height: auto !important;
}

.ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
  white-space: normal !important;  
}

.ui-jqgrid .ui-th-div-ie{
  white-space: normal !important;  
}

- AaronLS

Answer 4

您可以使用classes colModel选项在列上放置CSS类，然后在CSS文件中放置样式white-space: normal !important;在该类上...

classes

字符串

此选项允许向列添加类。如果要使用多个类，则应设置一个空格。例如，classes:'class1 class2'将为该列上的每个单元格设置class1和class2。

在网格css中，有一个预定义的类ui-ellipsis，它允许将省略号附加到特定行。这也适用于FireFox。

- lmcarreiro