jqgrid 可滚动对话框答案

【问题标题】：jqgrid scrollable dialogjqgrid 可滚动对话框
【发布时间】：2010-05-21 02:20:49
【问题描述】：

我有一个 jqGrid，它的添加/编辑对话框的形式比对话框高度长，但对话框不会滚动。我尝试在对话框中添加overflow: auto 样式但没有效果：

$("div.ui-jqdialog-content").css("overflow", "auto");

虽然，如果我将auto 更改为scroll，我至少会看到一个滚动条但仍然没有滚动：

$("div.ui-jqdialog-content").css("overflow", "scroll");

这至少给了我一线希望，我在正确的轨道上。

API 文档中似乎没有任何支持滚动的方向：

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing

有谁知道如何在 jqGrid 使用的 jqModal 对话框窗口中添加一个工作滚动条？

更新

这完全是一个 hack 工作，但我得到了一个滚动条来显示并执行以下操作：

setTimeout(function() {$("#FrmGrid_list").html('<div style="height: 300px; overflow: auto;">' + $("#FrmGrid_list").html() + '</div>');}, 1000);

我将此附加到afterShowForm 事件。但是，这确实不能解决问题，因为它会导致其他字段出现其他问题。

【问题讨论】：

如果您不喜欢 jqModal 在您的示例中不显示滚动条的原因，只需发布一个带有显示 JavaScript 文件加载顺序的 HTML 代码的代码示例

标签： dialog scroll jqgrid

【解决方案1】：

我想我会分享我的解决方案供其他人参考。

form 元素有一个默认的height: auto; 样式属性，这会导致overflow: auto; 无法正常工作。要使溢出滚动，需要将高度设置为固定数字以约束form 容器，因此需要overflow。

我使用以下代码将 css 更新附加到 afterShowForm 表单编辑事件：

afterShowForm: function(form) { form.css("height", "300px"); }

请注意，300px 是我选择用于测试的任意数字。该数字将根据我的需要进行调整。它甚至可以在调整大小时动态调整。谁知道呢。

另外，使用 Firebug 我发现我的表单 ID 是 FrmGrid_list。我的网格 ID 是 list（例如 <table id="list"></table> 和 jQuery("#list").jqGrid({...});）。如果您的网格被命名为列表以外的其他名称，则表单 id（上图）应该反映这一点。

参考链接：

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing

【讨论】：

只有一点点改进。 afterShowForm可以用一个参数function(form)声明，form参数将被jqGrid初始化为$("#FrmGrid_list")。所以代码可能看起来像form.css ("height", "300px");。
不错。真香啊我会把它添加到上面。

【解决方案2】：

你的问题听起来很奇怪。每个编辑/添加对话框已经有一个可滚动的form，里面有名称“FormPost”。此表单有以下样式：

position: relative; width: 100%; height: auto; overflow: auto;

我刚刚测试了一个带有很多控件的 jqGrid，并且可以毫无问题地在那里滚动。

您出现这种奇怪行为的原因可能是您要么忘记包含可选的 jqModal.js 和 jqDnR.js（参见相同的 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing 页面开头）或使用了错误的文件路径，所以它们将不会被加载。

【讨论】：

嗨，奥列格，感谢您的回复。我将 jqModal.js 和 jqDnR.js 库添加到我的脚本中（它们事先不存在）但没有任何变化。我认为 height: auto 风格是罪魁祸首。我可能是错的，但它似乎调整了高度以适应内容。溢出永远不会被调用做高度：自动。不应该固定高度以引起约束并使溢出成为必要吗？如果我错了，请纠正我。
宾果游戏！就是这样。
标签有一个高度：auto。当我将其更改为固定高度时，滚动条出现并完美运行。 $("#FrmGrid_list").css("height", "300px");我也会在上面发布。

【解决方案3】：

这个问题很老了，但我还是会添加一个答案。

我不知道以前是否可行，但现在您可以简单地使用对话框的dataheight 属性（添加或编辑）来精确设置内部表单的高度（以像素为单位）。默认值为“自动”，因此它不会溢出。如有必要，设置所需的高度会显示滚动条。

参考：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing

【讨论】：