在免费 jqgrid 中添加新行后如何从服务器设置行 ID答案

【问题标题】：How to set row id from server after adding new row in free jqgrid在免费 jqgrid 中添加新行后如何从服务器设置行 ID
【发布时间】：2015-06-16 15:50:57
【问题描述】：

如果使用表单编辑添加新行、保存到服务并且服务器返回自动生成的行 ID，则免费 jqgrid 不会设置行 ID。后续编辑添加的行会导致错误。

我使用下面的代码从 github 尝试了免费的 jqgrid，但问题仍然存在。

要重现，请在浏览器中打开下面的页面，单击加号按钮添加行并按下提交然后取消 ID 列为空。代码包含：

           afterSubmit: function (response, postdata) {
               return [true, '', '100'];

模拟返回远程 id 100 的服务器响应。所以添加后Id列应该包含vlaue 100。

我也将它作为免费的 jqgrid 问题发布在 github 上，但没有得到任何回复。如何修复它以便可以使用表单编辑添加行？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css"/>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
<script src="http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
    <script type="text/javascript">
        $(function () {
            "use strict";
            var mydata = [
                ],
                $grid = $("#list");

            $grid.jqGrid({
                datatype: "local",
                data: mydata,
                colNames: ["Client", "Id"],
                colModel: [
                    { name: "name", align: "center", editable: true },
                    { name: "id" }
                ],
                iconSet: "fontAwesome",
                pager: "#pager",
                gridview: true,
                autoencode: true,
                ignoreCase: true,
                onSelectRow: function (rowid) {
                    var $self = $(this),
                        savedRow = $self.jqGrid("getGridParam", "savedRow");
                    if (savedRow.length > 0) {
                        $self.jqGrid("restoreRow", savedRow[0].id);
                    }
                    $self.jqGrid("editRow", rowid, {
                        keys: true
                    });
                }
            })

.jqGrid('navGrid', {}, {},
{
}
})
;

        });
    //]]>
    </script>
</head>
<body>
    <table id="list"><tr><td></td></tr></table>
    <div id="pager"></div>
</body>
</html>

【问题讨论】：

标签： jquery jqgrid free-jqgrid

【解决方案1】：

谢谢！这是 jqGrid 4.7 中的一个错误，请参阅the line：

idname = url === 'clientArray' ? $t.p.keyName : opers.id;

Free jqGrid 是基于 jqGrid 4.7 的，所以它也有同样的问题。我刚才发了the fix，把上面那行改成下面这样了

idname = url === "clientArray" && p.keyName !== false ? p.keyName : opers.id;

现在问题应该解决了。

【讨论】：

这仅修复了本地数据的问题。如果使用远程json数据，问题依然存在。
@Andrus：我的远程保存数据测试和reloadAfterSubmit: false 显示没有问题。新添加行的id 属性值将正确分配给afterSubmit 返回的值。您是否以相同的方式验证了问题，或者您有一些列在网格中有key: true 列或名称为id 的列？列的修改不是 jqGrid 的特性（至少在所有旧版本中）。所以你只需在afterSubmit 中添加postdata.id = '100'; 行。如果该列不可编辑，则可以使用setCell 分配值。
@Andrus：绝对是另一句话。如果您使用免费 jqGrid 的当前来源，那么您可以使用 iColByName 参数，该参数是通过 name 属性的值在 colModel 中给出列索引的映射。它可以简化部分代码。
我在stackoverflow.com/questions/29571905/…发布了相关问题