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

时间:2015-04-10 22:56:33

标签: jquery jqgrid free-jqgrid

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

我尝试了以下代码:选中行,点击表单编辑按钮并更改了anda和id。 按下提交按钮后,id列值未在网格中更改。如何更改id列vaue?

<!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>

1 个答案:

答案 0 :(得分:1)

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

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

应该有效。我认为您可以修改任何甚至不可编辑的列,但仅限于添加新行的情况。

由于the line(或jqGrid 4.7的the line),唯一的例外可能是id列。

为了确保一个人没有modified的情况,再次使用免费的jqGrid代码。您应该尝试使用最新的免费jqGrid来源