如何在jqgrid视图窗口中添加滚动条并限制其高度

Question

如果表格包含大型多行文本列，则按下jqgrid查看工具栏按钮会创建一个高度很大且没有滚动条的查看窗口。大部分数据在屏幕外不可见。

我试图添加滚动条并限制其高度，使用

jQuery.extend(jQuery.jgrid.view, {
   savekey: [true, 13],
   recreateForm: true,
   closeOnEscape: true,
   dataheight: screen.height-230,
   height: 0.82* screen.height,
   width: 0.96*screen.width,
   top:5
     });

但这些设置会被忽略（如果使用jQuery.jgrid.edit，则仅适用于编辑窗口）。如何添加滚动条并限制视图窗口的高度，以便其中包含的数据超出屏幕大小？

- Andrus

Answer 1

我建议从答案中获取演示，并稍微扩展代码。在beforeShowForm方法中，我建议包括额外的一行。

$(this).children("span").css({
    overflow: "auto",
    "text-align": "inherit", // overwrite 'text-align: "right"' if exist
    display: "inline-block",
    "max-height": "100px"
});

您可以在演示中查看结果。视图表单的高度将是可变的，但每个字段的最大高度将受到限制，最高为100px（请参见上方的max-height）： 或者

- Oleg

---

谢谢。在我的情况下，多行文本列宽很大。在这种情况下，在查看表单中，文本区域的右侧滚动条不可见。如何增加视图窗口宽度，可能减小文本区域宽度，以便始终可见文本区域的右侧垂直滚动条？ - Andrus

@Andrus：你可以在设置$(this).children("span")的CSS选项列表中添加类似"max-width": "300px"或"width": "300px"这样的内容。 - Oleg

我发现在navGrid视图参数中指定视图窗口尺寸是有效的。您提出的样式会从文本区域中删除换行符。我没有看到有或没有这种样式对布局造成任何影响。我没有将此样式和beforeShowform添加到应用程序中。无论如何，我认为您的答案非常好，我标记并点赞了它。非常感谢您的帮助。 - Andrus

height: 0.82*screen.height 显示的是全屏窗口，对于少量数据来说看起来很丑，因此整个窗口的最大高度仍应受到限制。我在http://stackoverflow.com/questions/8418550/how-to-restrict-max-height-of-jqgrid-edit-and-view-windows中发布了一个单独的问题。 - Andrus