在免费jqgrid中进行表单编辑后如何设置行ID值 [英] How to set row id value after form editing in free jqgrid
本文介绍了在免费jqgrid中进行表单编辑后如何设置行ID值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
表的主键具有3列(Grupp，Kuu，Toode)，并且服务器返回从这些列创建的ID.
Table has primary key with 3 columns (Grupp,Kuu,Toode) and server returns Id created from those columns.
在表单编辑中更改了主键列之后，服务器会发回新的行ID.
After primary key column is changed in form editing, server sends new row id back.
免费的jqgrid不会将此行ID设置为已更改的行ID.服务器返回新ID.
Free jqgrid does not set this row id as changed row id. Server returns new id.
我尝试使用以下方法在editfor afterSubmit方法中的以下代码中更改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];
}
但是如果再次编辑行，旧的ID仍会传递给服务器.
but old id is still passed to server if row is edited again.
复制步骤:
- 在Chrome中打开下面的页面
- 通过单击选择行
- 使用工具栏的编辑按钮打开表单编辑器
- 更改字段Kuu值
- 按提交按钮. jqgrid的Kuu列中的更改后的价值Appers
- 双击行开始编辑行
- 按Enter键.来自服务器Appers的错误消息，因为主键错误(旧) 传递给服务器.
- Open page below in Chrome
- Select row by clicking in it
- Use toolbar edit button to open form editor
- Change field Kuu value
- Press submit button. Changed value appers in Kuu column in jqgrid
- Double click in row to start row editing
- Press enter. Error message from server appers since wrong (old) primary key is passed to server.
代码:
<!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/> 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().问题仍然存在.在第二种形式或内联编辑中，错误的密钥仍传递给服务器.
我在下面更新了测试用例.
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.
推荐答案
似乎您要在编辑后更改该行的rowid.使用prmNames: { id: "_rowid", ...}选项将编辑数据发送到服务器.因此，postdata._rowid应该包含编辑行的rowid.编辑后服务器发出的响应看起来像
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"}
其中的Id属性包含在编辑行后的新行ID .在这种情况下，您可以使用afterComplete回调
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;
}
}
}
}
您应在用于表单编辑的editParams中包括这样的回调:
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,
};
这篇关于在免费jqgrid中进行表单编辑后如何设置行ID值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
