如何仅在网格中限制 jqgrid textarea 的高度

Question

Textarea 包含很多或行。在 jqgrid 网格中，只应显示第一行。 在 jqgrid 视图窗口中，还应该显示更多的行和可能的滚动条。

来自How to restrict maximum height of row in jqgrid的奥列格回答

将视图窗口中的文本区域高度也限制为单行。 如何仅在网格中显示第一行，但在 jqgrid 视图形式中显示更多行？

colmodel 是：

{"name":"Description",
  "edittype":"textarea",
  "wrap":"on",
  "formatter":function(v){ return '<div style="max-height:20px">'+$.jgrid.htmlEncode(v)+'</div>';
                             } 
  ,"editoptions":{"class":"","rows":18,"wrap":"off","style":"width:800px",
      "readonly":"readonly"
      },
  "editrules":{"edithidden":true},"editable":true,"width":539,
  "classes":"jqgrid-readonlycolumn"}

jqgrid 视图窗口显示多行。这应该保持不变：

grid 还显示多行。这是错误的。：

如何强制网格在每个文本区域中只显示第一行

或者可以在屏幕底部显示更多行：如果某行变为活动状态，则 textarea 列的前 10 行应显示在底部。这就像在 Windows 日志查看器中：移动到事件行在单独的窗口中显示事件长数据

Answer 1

如果我正确理解您的问题，您可以通过相对简单的方式解决它。您应该只使用 CSS 而不是内联样式来设置具有多行数据的 div 的 max-height。例如，您可以使用colModel 的classes 属性在具有多行元素的列的<td> 元素上设置一些类。比如你会使用classes: "textInDiv"<td>对应列的单元格会得到class属性。因为您在网格内部和视图表单内部具有不同的元素层次结构，您可以在两种情况下指定不同的高度限制：

{name: "Description", edittype: "textarea", classes: "textInDiv",
    formatter: function (v) {
        return '<div>' + $.jgrid.htmlEncode(v) + '</div>';
    }}

和

tr.jqgrow>td.textInDiv>div {
    max-height: 20px;
    overflow: auto
}
td.form-view-data>span>div {
    max-height: 150px;
    overflow: auto
}

The demo 展示结果。您如何在以下图片中看到单元格包含的max-height 对于网格和视图表单是不同的：