如何在表单编辑中更改 id 列的值答案

【问题标题】：How to change value of id column in form editing如何在表单编辑中更改 id 列的值
【发布时间】：2015-04-10 22:56:32
【问题描述】：

我正在寻找一种使用表单编辑来更改 id 列值的方法。

我尝试了下面的代码：选定的行，单击表单编辑按钮并更改了 anda 和 id。按下提交按钮后，网格中的 id 列值不会更改。如何也更改 id 列值？

<!DOCTYPE html>
<html>
<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 = [ { name: 'name', id:'id'}
                ],
                $grid = $("#list");

            $grid.jqGrid({
                datatype: "local",
                data: mydata,
                colNames: ["Client", "Id"],
                colModel: [
                    { name: "name",  editable: true },
                    { name: "id", editable: true }
                ],
                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', {}, {},
{
//           afterSubmit: function (response, postdata) {
//postdata.id='100';
//               return [true, '']; //, '100'];
// }
})
;

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

【问题讨论】：

@Oleg：我试过了，但问题仍然存在。我在 cmets 中更详细地描述了您的答案。在我的应用程序中使用了自然主键，用户喜欢在表单和内联编辑中多次更改它们。我们几年前在其他答案中讨论过这个问题，您建议使用代理 ID，但这超出了这个问题的范围。目前，在更改 id 后，需要全屏刷新才能再次编辑行。我正在寻找一种方法来避免这种额外的屏幕刷新

标签： jquery jqgrid free-jqgrid

【解决方案1】：

我无法测试这个，但我认为

的用法

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

应该可以。我认为您可以修改 any 甚至是不可编辑的列，但仅限于添加新行的情况。

唯一的例外可能是 id 列，因为 the line（或 jqGrid 4.7 的 the line）。

为了确保没有情况，我再次modified免费jqGrid的代码。您应该尝试使用最新的免费 jqGrid 资源

【讨论】：

问题是关于使用表单编辑更新现有行 id。我重新测试了使用来自 github master 的 jqgrid 的有问题的代码，但问题仍然存在：单击编辑按钮，更改 id 列并按下提交按钮仍然在 jqgrid 列中显示旧的 id 值。
我添加了postdata.id='changed id in form' 以形成编辑后提交方法。在这种情况下，网格会显示新 ID，但尝试再次编辑行仍会将旧 ID 发布到服务器。如何在表单中更改 id 并在此之后再次编辑行后强制 jqgrid 将新 id 发布到服务器？如果使用内联编辑更改 id，则可以毫无问题地编辑具有新 id 的更改行。
@Andrus：我确定在我写答案的过程中，您的专栏文本中的id 列中没有editable: true。您不能只更改问题，因为我的旧答案不会更完全正确！如果您有带有name "id" 的可编辑列并且没有key: true，那么您有名称冲突，您可以更改将发送到服务器的rowid 的名称：prmNames: { id: "newIdName" }
您可以点击我名下的所有操作修订。这个问题没有修改。我也不记得我已经改变了这一点。其他问题中也有类似的测试用例。在其他问题中，id 始终是只读的，但对于这个问题，我特意让 id 可编辑。所以看起来我没有以任何方式改变这个问题。也许我应该创建更多真实的测试用例，但我不知道如何为其提供遥控器。
@Andrus：抱歉，我似乎错了，我将代码与您发布的其他代码混淆了，因为我回答了平行的问题。不过，您是否尝试将发送到服务器的 rowid 重命名为另一个名称？ old rowid 的默认名称（在 Add 表单的情况下为 "_empty"）是 "id" 如果您需要将该名称用作列名，那么您必须使用类似 @987654334 的名称@。在这种情况下，rowid 将以名称 "oldRowId" 发送，"id" 将来自可编辑的 "id" 列。