javascript - 如何在免费 jqgrid 中编辑表单后设置行 ID 值

Question

表的主键包含 3 列（Grupp、Kuu、Toode），服务器返回从这些列创建的 Id。

在表单编辑中更改主键列后，服务器将新的行 ID 发送回。

免费 jqgrid 不会将此行 ID 设置为更改的行 ID。服务器返回新的 id。

我尝试通过使用在editfor afterSubmit方法中更改下面代码中的id

function EditAddForm_AfterSubmit(response, postdata) {
  var json = $.parseJSON(response.responseText);
  return [true, '', json.Id];
  }

但是如果再次编辑行，旧的 id 仍会传递给服务器。

重现步骤：

在 Chrome 中打开下面的页面
通过单击选择行
使用工具栏编辑按钮打开表单编辑器
更改字段 Kuu 值
按提交按钮。更改 jqgrid 中 Kuu 列中的值
双击行开始行编辑
按回车。由于错误的（旧）主键被传递给服务器，因此来自服务器的错误消息。

代码：

  <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <base href="http://example.com/" />
        <link rel="stylesheet" href="http://example.com/themes/redmond/jquery-ui.css" type="text/css" />
        <link rel="stylesheet"
              href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <link href="http://example.com/Content/Css/normalize.css" rel="stylesheet"/>
    <link href="http://example.com/Scripts/jqgrid-4.8.0/css/ui.jqgrid.css" rel="stylesheet"/>


    <title>
Old primary key value is passed if primary key is changed
    </title>
    <script type="text/javascript">
        "use strict";
        var BASE_URL = 'http://example.com/',
            Message = {
                selectRows: "Select",
                sendingQuery: "Send"
                };
    </script>

<script src="http://example.com/Scripts/jquery-1.11.2.js"></script>
<script src="http://example.com/Scripts/jquery-ui-1.11.4.js"></script>
<script src="http://example.com/Scripts/jqgrid-4.8.0/js/jquery.jqgrid.src.js"></script>
<script src="http://example.com/Scripts/json2.js"></script>
<script src="http://example.com/Scripts/erp.js"></script>
<script src="http://example.com/Scripts/AfterGridInit.js"></script>
<script src="http://example.com/Scripts/TinyMCE/tiny_mce.js"></script>
<script src="http://example.com/Scripts/TinyMCE/jquery.tinymce.js"></script>

    <script type="text/javascript">
    var 
        $grid,
        lastSelectedRow,
        autoedit = false,

          jqXHRFromOnSuccess,
          idsOfSelectedRows,
          myColumnsState,
          isColState,
          myColumnStateName;

    $.extend(true, $.jgrid.defaults, {
        mtype: 'POST',

        iconSet: "fontAwesome" ,
        navOptions: {
            position: "center"},

        autoResizing: { compact: true,widthOfVisiblePartOfSortIcon: 13 },
        toppager: true,
        viewrecords: false,
        onSelectRow: grid_onSelectRow,
        onSelectAll: grid_onSelectAll,

        sortable: function (permutation) {
            saveWindowState();
        },
        multiselect: true,
        ajaxRowOptions: { async: true },
        scrollrows: true,
        prmNames: {  
            id: "_rowid", page: "_page", rows: "_rows", oper: "_oper", sort: "_sidx", order: "_sord",
            nd: "_nd"
        },
        loadui: 'block',



          cmTemplate: { fixed: true, autoResizable: true },
        autoencode: true,
        gridview: true,

        serializeGridData: function (postData) {

            var myPostData = $.extend({}, postData);
            myPostData._filters = myPostData.filters;
            delete myPostData._oper;
            delete myPostData.filters;
            delete myPostData.searchField;
            delete myPostData.searchString;
            delete myPostData.searchOper;
            return myPostData;
        },

        shrinkToFit: false

    });

    $.extend(true,$.jgrid.edit, {
        beforeSubmit: function (postdata, formid) {
            showModeless('Saving');
            return [true, ""];
        },

        closeAfterAdd: true,
        recreateForm: true,
        reloadAfterSubmit: false
    });
</script>
</head>

<body>
    <div id="container">

<script type="text/javascript">
    var editParams =  {
      // code added according to proposed answer
      afterComplete: function (jqXhr, postdata, $form, formOper) {
            if (formOper !== "add") {
                var json = $.parseJSON(jqXhr.responseText);
                $("#" + $.jgrid.jqID(postdata._rowid)).attr(json.Id);
            }
        },

        afterSubmit: function (response, postdata) {
            return EditAddForm_AfterSubmit(response, postdata);
        },

      url: 'http://example.com/Grid/Edit?_entity=Grnait',
      closeAfterEdit: true
      };

    function selectedRowsAction(action) {
    }

    $(function () {
        'use strict';
        $('body').css('overflow-y', 'hidden');
        var urlFilters,
                namedParameters = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'),
                parameters = {},
                nameAndValue,
                i,
                cm= [{"hidden":false,"label":"Tegevus","name":"_actions","search":false,"width":72
,"sortable":false,"formatter":"actions","viewable":false,"formatoptions":{"editbutton":true,"onSuccess":function (jqXHR) { jqXHRFromOnSuccess=jqXHR;return true;}
,"delbutton":true,"delOptions":{"url":"http://localhost:52216/admin/Grid/Delete?_entity=Grnait","afterComplete":function (response, postdata, formid) { 
summarefresh($grid);
$grid[0].focus(); 
}
}}},{"label":"Objekt","name":"Grupp","index":"Grupp","edittype":"select","editoptions":{"formatter":"select","value":":;1:1;11:11;14:14;2:2;21:21;22:22;23:23;251:251;30:30;31:31;40:40;41:41","class":"ui-widget-content jqgrid-inlineedit-element","style":"width:100%;max-width:210px;height:130%","dataEvents":[{"type":"change","fn":function(e) {
updateSelectValue(this, 'Grupp');
dataChanged(this);
}
},{"type":"keydown","fn":function(e) {
if(!enter(e)) return;
updateSelectValue(this, 'Grupp');
dataChanged(this);
}
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
}]},"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"editable":true,"width":70,"hidden":false},{"label":"Artikkel","name":"Toode","index":"Toode","edittype":"custom","editoptions":{"maxlength":20,"size":20,"lookup":"ToodeL","custom_element":function(value, options) {
return combobox_element(value, options,'38','Toode','Grnait','YToode')}
,"custom_value":combobox_value
},"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"editable":true,"width":60,"hidden":false},{"label":"Artikli nimi","name":"Toode0_nimetus","index":"Toode0_nimetus","edittype":"custom","editoptions":{"maxlength":0,"size":0,"lookup":"ToodeL","custom_element":function(value, options) {
return combobox_element(value, options,'78','Toode0_nimetus','Grnait','ArtikliNimi%c3%9c%c3%bcriarvestusel')}
,"custom_value":combobox_value
},"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"editable":true,"width":100,"hidden":false},{"label":"Algnäit","name":"Anait","index":"Anait","align":"right","searchoptions":{"sopt":["eq","ne","lt","le","gt","ge"]},"editoptions":{"maxlength":13,"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)}
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
}],"style":"text-align:right","readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},"editable":true,"width":63,"classes":null,"hidden":false},{"label":"Kuu","name":"Kuu","index":"Kuu","editoptions":{"maxlength":6,"size":6,"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)}
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
}],"readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},"editable":true,"width":43,"classes":null,"hidden":false,"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"stype":"text"},{"label":"Lõppnäit","name":"Lnait","index":"Lnait","align":"right","searchoptions":{"sopt":["eq","ne","lt","le","gt","ge"]},"editoptions":{"maxlength":13,"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)}
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
}],"style":"text-align:right","readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},"editable":true,"width":74,"classes":null,"hidden":false},{"label":"Kogus","name":"Kogus","index":"Kogus","align":"right","searchoptions":{"sopt":["eq","ne","lt","le","gt","ge"]},"editoptions":{"maxlength":13,"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)}
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
}],"style":"text-align:right","readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},"editable":true,"width":71,"classes":null,"hidden":false},{"label":"Koguse jagamine","name":"Klassif1_nimetus","index":"Klassif1_nimetus","edittype":"select","editoptions":{"formatter":"select","value":":;R:Arvestuslik pind ;E:Elanike arvu järgi ;K:Korterite järgi ;:Kõigile sama ;V:Köetav pind ;P:Pindala järgi ","class":"ui-widget-content jqgrid-inlineedit-element","style":"width:100%;max-width:327px;height:130%","dataEvents":[{"type":"change","fn":function(e) {
updateSelectValue(this, 'Kogusx');
dataChanged(this);
}
},{"type":"keydown","fn":function(e) {
if(!enter(e)) return;
updateSelectValue(this, 'Kogusx');
dataChanged(this);
}
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
}]},"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"editable":true,"width":109,"hidden":false},{"label":null,"name":"Kogusx","index":"Kogusx","editoptions":{"maxlength":1,"size":1,"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)}
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
}],"readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},"editable":true,"width":0,"classes":null,"hidden":true,"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"stype":"text"}],
                //colModel,
                //sortName,
                emptyMsgDiv = $('<div style="display:none"><br/>&nbsp;&nbsp;Ei leia</div>');


        $grid = $("#grid");
        myColumnStateName = "Grnait.0.colState"; // 'Grnait.colState';
        myColumnsState = restoreColumnState(cm, myColumnStateName);
        isColState = typeof (myColumnsState) !== 'undefined' && myColumnsState !== null;
        idsOfSelectedRows = isColState && typeof (myColumnsState.selectedRows) !== "undefined" ?
                                    myColumnsState.selectedRows : [];
        urlFilters = isColState ? myColumnsState.filters : {};

        $grid.jqGrid({
            postData: { filters: urlFilters


                            },
            datatype: "json",

            rowNum: isColState ? myColumnsState.rowNum : 50,
            url: 'http://example.com/Grid/GetData?_entity=Grnait',
            colModel: cm,
                editurl: 'http://example.com/Grid/Edit?_entity=Grnait',


            beforeSelectRow: function (rowid, e) {
                var $this = $(this), rows = this.rows,
                  startId = $this.jqGrid('getGridParam', 'selrow'),
                  startRow, endRow, iStart, iEnd, i, rowidIndex,
                  colName = $.jgrid.getCellIndex($(e.target).closest('td')[0]),
               $self = $(this),
               savedRow = $self.jqGrid("getGridParam", "savedRow"),
               cmd = $grid.jqGrid('getGridParam', 'colModel');


                $("body").children("ul.ui-jqgrid-showHideColumnMenu").menu("destroy").remove();


                if (cmd[colName].name === 'cb' ) {
                    return true;
                }


                if (savedRow.length > 0 && savedRow[0].id !== rowid) {
                    //                if (typeof (lastSelectedRow) !== "undefined" && lastSelectedRow !== rowid) {
                    cancelEditing($grid);
                }

                if (!autoedit || ClickedInActionButton(e)) {
                    resetSelection();
                    return true;
                }


                if (lastSelectedRow !== rowid) {
                    jqGrid_editRow(rowid, afterGridSaveFunc, colName );

                    // PutFocus(e.target);
                }
                                PutFocus(e.target);
                return true;
            },




            ondblClickRow: function(rowId,iRow,iCol,e) {

                if (autoedit) {
                    return;
                }

                if (isInlineEdit()) {
                    return;
                }
                openDetail(rowId);
                PutFocus(e.target);
            },
            formDeleting: formDeletingTemplate
        });


        emptyMsgDiv.insertAfter($grid.parent());

        $grid.jqGrid('bindKeys', {
            scrollingRows: true,
            onEnter: openDetail
        }  );


        $grid.jqGrid("navGrid", "#grid_toppager", {
            edit: true
        },
        editParams,
       {
       },

    { 
    },
         searchParams
    ,
       {            }
                );

        var reloadWithNewFilterTemplate = function () {
            $grid.trigger('reloadGrid', [{current: true, page: 1}]);
        };
        GridCommon(false, 'Grnait',-1 );

    }); 

    function openDetail(rowId) {
        jqGrid_editRow(rowId, afterGridSaveFunc,false);
    }

    function addDocument() {
    }

    function onInlineEdit(rowId) {
        var savedRow = $grid.jqGrid("getGridParam", "savedRow");
        if (savedRow.length > 0 && savedRow[0].id !== rowId) {
            // if (rowId && rowId !== lastSelectedRow) {
                cancelEditing($grid);
            lastSelectedRow = rowId;
        }
    }

    function PutFocus(target) {
        $("input, select",target).select();
            }

    function afterGridSaveFunc(rowId, response) {
            aftersavefunc(rowId, response);
    }
</script>
<script type="text/javascript">
    function EditAddForm_AfterSubmit(response, postdata) {
        clearModeless();
        if (response.responseText.charAt(0) === '{') {
            var json = $.parseJSON(response.responseText);
                    postdata['Grupp'] = json.PrimaryKeyValues[0];
                    postdata['Kuu'] = json.PrimaryKeyValues[1];
                    postdata['Toode'] = json.PrimaryKeyValues[2];
            return [true, '', json.Id];
        }
        alert( decodeErrorMessage(response.responseText, '', ''));
        return [false, decodeErrorMessage(response.responseText, '', ''), null];
    }


    var afterSaveFuncAfterAdd = function(rowId, response) {
        var data = $.parseJSON(response.responseText);
        $(this).jqGrid('setRowData', rowId, { Grupp: data.PrimaryKeyValues[0] });
        cancelEditing($grid);
     afterGridSaveFunc(rowId,response);
        jqXHRFromOnSuccess=null;
    };


    $.extend(true,
    $.jgrid.inlineEdit, {

        position: "beforeSelected",
        focusField: false,
        restoreAfterError: false,
        afterrestorefunc: function(rowId) {
            updateButtonState($grid, rowId);
            setFocusToGrid();
            lastSelectedRow = undefined;
        },
        aftersavefunc: function(rowId, response) {
            afterSaveFuncAfterAdd(rowId, response);
        },
        oneditfunc: function(rowId) {
            onInlineEdit(rowId);
            updateButtonState($grid, rowId);
        },
        keys: true,
        rowID: '_empty',
        useDefValues: true,
        extraparam: { _dokdata: getEevaFormData },
        errorfunc: errorfunc
    });
</script>
    <div id="grid1container" style="width: 100%; height: 100%">
        <table id="grid"></table>
    </div>
        </div>
    </div>
</body>
</html>

更新

我根据答案添加了 afterComplete 并验证了正确的 id 已传递给attr(). 问题仍然存在。在第二种形式或内联编辑中，错误的键仍然传递给服务器。我在下面更新了测试用例。

score 1 · Accepted Answer

看来您想在编辑后更改行的rowid。prmNames: { id: "_rowid", ...}您使用选项将编辑数据发送到服务器。所以postdata._rowid应该包含编辑行的rowid。编辑后服务器的响应看起来像

{"PrimaryKeyValues":["1","change","004"],"Id":"1ä_63_68_61_6E_67_65ä004"}

whereId属性在编辑行后包含新的 rowid 。在这种情况下，您可以使用afterComplete回调

afterComplete: function (jqXhr, postdata, $form, formOper) {
    if (formOper !== "add") {
        var json = $.parseJSON(jqXhr.responseText),
            p = $(this).jqGrid("getGridParam"),
            oldId = p.idPrefix + postdata._rowid,
            newId = p.idPrefix + json.Id,
            i;
        $("#" + $.jgrid.jqID(oldId)).attr("id", newId);
        if (p.selrow === oldId) {
            p.selrow = newId;
            i = $.inArray(oldId, p.selarrrow);
            if (i >= 0) {
                p.selarrrow[i] = newId;
            }
        }
    }
}

editParams您应该在用于表单编辑的回调中包含此类回调：

var editParams =  {
    afterSubmit: function (response, postdata) {
        return EditAddForm_AfterSubmit(response, postdata);
    },
    afterComplete: function (jqXhr, postdata, $form, formOper) {
        if (formOper !== "add") {
            var json = $.parseJSON(jqXhr.responseText),
                p = $(this).jqGrid("getGridParam"),
                oldId = p.idPrefix + postdata._rowid,
                newId = p.idPrefix + json.Id,
                i;
            $("#" + $.jgrid.jqID(oldId)).attr("id", newId);
            if (p.selrow === oldId) {
                p.selrow = newId;
                i = $.inArray(oldId, p.selarrrow);
                if (i >= 0) {
                    p.selarrrow[i] = newId;
                }
            }
        }
    },
    url: 'http://example.com/Edit?_entity=Grnait',
    closeAfterEdit: true,
};

javascript - 如何在免费 jqgrid 中编辑表单后设置行 ID 值

1 回答 1

Related

Reference