Jquery JQGrid中的列字包装

任何人都知道如何在JQGrid中包装列名。请在下面找到我的JSON代码

colModel：[ {name:'RequestID'，index:'CreditRequest.CreditRequestID'，宽度：100，对齐：'left'}

---

参考上述代码，如果内容的大小超过，我希望对其进行包装。任何想法或评论

您都可以将th标记的空白css属性设置为正常。使用JQuery应该：

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

---

您需要查看应用于jqGrid第th列标题的特定类。在我的例子中，我有以下内容：

ui-th-div ie ui-jqGrid-sortable

再进一步看，我发现有两个CSS问题：

空白：正常

高度：16像素

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

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

---

确保换行的最简单方法是在需要换行的列名中放置一个

标记。例如

ClientPrimaryName

可以写成

Client
PrimaryName

，因此它实际上呈现为：

---

客户端
PrimaryName

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

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

---

只要您的css文件列在jqGrid.css文件后面的标题中，它就会覆盖它。

关于它的价值，这里是标题行：

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

---

下面是在单元格中启用换行的几个步骤

打开ui.jqgrid.css 搜索.ui jqgrid tr.jqgrow td 将“空白：预处理”更改为“空白：正常”

对于包裹单元：

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

使用这个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
    }

---

你不能只放一个

，而这可以包装线条-它不能正确调整高度这在jqGrid 4.4.4中起作用

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

---

所以你想包装列标题名称？你是希望它会动态更改还是只有很长的名称？这可能有助于你发布更多信息…嗨，这对我不起作用。还有其他建议吗？我非常需要它。添加一个换行符，但仍然不会垂直扩展单元格。这是页面上的最佳解决方案