1. 技术文章
  2. How to set row id value after form editing in free jqgrid

How to set row id value after form editing in free jqgrid

由 我是研究僧i 提交于 2020-01-16 13:19:54

问题


Table has primary key with 3 columns (Grupp,Kuu,Toode) and server returns Id created from those columns.

After primary key column is changed in form editing, server sends new row id back.

Free jqgrid does not set this row id as changed row id. Server returns new id.

I tried to change id in code below in editfor afterSubmit method by using

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

but old id is still passed to server if row is edited again.

Steps to reproduce:

  1. Open page below in Chrome
  2. Select row by clicking in it
  3. Use toolbar edit button to open form editor
  4. Change field Kuu value
  5. Press submit button. Changed value appers in Kuu column in jqgrid
  6. Double click in row to start row editing
  7. Press enter. Error message from server appers since wrong (old) primary key is passed to server.

code:

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

Update

I added afterComplete according to answer and verified that correct id is passed to attr(). Problem persists. In second form or inline edit wrong key is still passed to server. I updated testcase below.


回答1:


It seems that you want to change the rowid of the row after editing. You send the editing data to the server using prmNames: { id: "_rowid", ...} option. So postdata._rowid should contains the rowid of editing row. The response from the server after editing seems looks something like 

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

where Id property contains new rowid after editing the row. In the case you can use afterComplete callback 

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;
            }
        }
    }
}

You should include such callback in the editParams which you use for the form editing:

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,
};


来源：https://stackoverflow.com/questions/29588844/how-to-set-row-id-value-after-form-editing-in-free-jqgrid

标签
javascript
jquery
jqgrid
free-jqgrid
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!