jquery - jqGrid 中类似电子表格的内联编辑

Question

我正在使用 jQuery 1.4 和 jqGrid 3.8 beta，

这里我使用了jqgrid表，我想在其中创建像Excel表/电子表格这样的界面，其中已显示空白行数，用户可以在表格单元格中输入记录，这就是他们过去在电子表格中输入的原因。

我已经通过运行 JQgrid 的 addRowData 函数循环创建了空的可编辑行。之后，我通过指定 editable:true 使几个字段可编辑

现在的问题是，当我在字段中编辑某些内容并在之后写入一些内容时，如果我移动到另一行，则前一行上的旧编辑数据将不会存储在表中，它会消失。

这里是一个实时示例，尝试在可编辑字段中键入内容，然后移至下一行。

http://www.logicatrix.com/example/records.html

Answer 1

您的主要问题是，如果您想使用客户端编辑，则应将 editurl: "#" 更改为 editurl: 'clientArray' (请参阅 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow )。

此外，我建议您删除

<script src="js/jquery.jqGrid.js" type="text/javascript"></script>

因为您在 jqGrid 的所有需要​​的部分(“js/grid.base.js”等)之前插入。您还应该从 jQuery UI 复制 images 子目录。目前，由于无法加载 http://www.logicatrix.com/example/images/ui-bg_highlight-soft_100_eeeeee_1x100.png 等文件，因此会收到一些小错误。由于一些已知的小问题，我建议您在 jqGrid 3.8 发布之前也使用 jQuery UI 1.8.4 而不是 1.8.2。

已更新:顺便说一句，您可以在 http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm 下看到客户端编辑的工作示例(使用双击和 ENTER 进行行编辑)。我之前为答案 How to disable auto update when jqGrid edited? 准备过。对示例进行简单的更改即可为您提供可能需要的代码。