Я искал здесь, чтобы узнать, как перезагрузить сетку после сохранения строки:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing
JQGrid setRowData После встроенного редактирования
Метод afterInsertRow: function (ids) не выполняется, когда я использую gridview: true
Поэтому я придумаю следующее решение:
onSelectRow: function (id) {
var tr;
if (id && id !== lastSel) {
if (typeof lastSel !== "undefined") {
grid.jqGrid('restoreRow', lastSel);
//this line doing the reload
grid.jqGrid('saveRow', id, true, '', '', '', '', reloadGrid());
tr = grid[0].rows.namedItem(lastSel);
$("div.ui-inline-edit", tr).show();
$("div.ui-inline-save, div.ui-inline-cancel", tr).hide();
}
lastSel = id;
}
},
Я использую Действияformatter
{ name: 'act', index: 'act', width: 60, align: 'center', sortable: false, formatter: 'actions',
formatoptions: {
keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
delOptions: myDelOptions,
afterSave: hideDelIcon,
afterRestore: hideDelIcon
}
}
Свойства сетки
rowNum: 10000,
gridview: true,
rownumbers: true,
ignoreCase: true,
viewrecords: true,
sortorder: "desc",
height: "100%",
editurl: '/Admin/Edit/',
grouping: true,
groupingView: {
groupField: ['race'],
groupColumnShow: [false],
groupText: ['<b class="selection-race">{0}</b>'],
groupDataSorted: true
},
ondblClickRow: function (id, ri, ci) {
var tr;
// edit the row and save it on press "enter" key
grid.jqGrid('editRow', id, true, null, null);
tr = grid[0].rows.namedItem(lastSel);
//$("div.ui-inline-edit, div.ui-inline-del", tr).hide();
$("div.ui-inline-edit", tr).hide();
$("div.ui-inline-save, div.ui-inline-cancel", tr).show();
},
onSelectRow: function (id) {
var tr;
if (id && id !== lastSel) {
// cancel editing of the previous selected row if it was in editing state.
// jqGrid hold intern savedRow array inside of jqGrid object,
// so it is safe to call restoreRow method with any id parameter
// if jqGrid not in editing state
if (typeof lastSel !== "undefined") {
grid.jqGrid('restoreRow', lastSel);
grid.jqGrid('saveRow', id, true, '', '', '', '', reloadGrid());
tr = grid[0].rows.namedItem(lastSel);
//$("div.ui-inline-edit, div.ui-inline-del", tr).show();
$("div.ui-inline-edit", tr).show();
$("div.ui-inline-save, div.ui-inline-cancel", tr).hide();
}
lastSel = id;
}
},
loadComplete: function () {
$(this).find("div.ui-inline-del").hide();
var ids = jQuery("#Grid1").getDataIDs();
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
$("tr#" + $.jgrid.jqID(cl)).prev().children().find("span.ui-icon-circlesmall-minus").hide();
}
var mids = jQuery("#Grid1").getDataIDs();
for (var i = 0; i < mids.length; i = i + 1) {
var cl2 = jQuery.jgrid.jqID(mids[i]);
var rowData = $("#Grid1").getRowData(cl2);
if (rowData.isonline == 'false') {
var trElement = jQuery("#" + cl2, jQuery('#sGrid1'));
trElement.removeClass('ui-widget-content');
trElement.addClass('not-approved');
}
}
$(".rowCount").text($("#Grid1").getGridParam("reccount"))
},
beforeRequest: function () {
$('#Grid1').setGridWidth(903, true);
}
}).jqGrid('navGrid', '#Pager1', { add: false, edit: false, del: false }, {}, {}, myDelOptions, { multipleSearch: true, overlay: false });
Предопределенные функции
var lastSel, rowdata,
grid = $("#Grid1"),
getColumnIndexByName = function (grid, columnName) {
var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length;
for (; i < l; i += 1) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
},
myDelOptions = {
processing: false,
mtype: "POST", reloadAfterSubmit: true, //delData: { name: rowdata.name, isgood: rowdata.isgood }
serializeDelData: function (postdata) {
//var rowdata = jQuery('#Grid1').getRowData(postdata.id);
// append postdata with any information
return { id: postdata.id, uploadinfoid: postdata.uploadinfoid, oper: postdata.oper, name: rowdata.name, isfast: rowdata.isfast, isgood: rowdata.isgood, isdead: rowdata.isdead, isslow: rowdata.isslow, isheavy: rowdata.isheavy, isonline: rowdata.isonline };
},
// because I use "local" data I don't want to send the changes to the server
// so I use "processing:true" setting and delete the row manually in onclickSubmit
onclickSubmit: function (rp_ge, rowid) {
rowdata = jQuery('#Grid1').getRowData(rowid);
// we can use onclickSubmit function as "onclick" on "Delete" button
// delete row
grid.delRowData(rowid);
$("#delmod" + grid[0].id).hide();
if (grid[0].p.lastpage > 1) {
// reload grid to make the row from the next page visable.
// TODO: deleting the last row from the last page which number is higher as 1
grid.trigger("reloadGrid", [{ page: grid[0].p.page}]);
}
return true;
}
},
hideDelIcon = function (rowid) {
setTimeout(function () {
$("tr#" + $.jgrid.jqID(rowid) + " div.ui-inline-del").hide();
}, 50);
},
reloadGrid = function (rowid, result) {
$("#Grid1").trigger("reloadGrid");
};
Работает, но проблема в том, что сетка перезагружается каждый раз после щелчка строки, но непосле нажатия кнопки сохранения.Это неправильное поведение, потому что нет причин обрабатывать необоснованные запросы к серверу и перезагружать сетку при каждом щелчке строки.
Как я могу изменить это поведение?Я хочу перезагрузить сетку только при нажатии кнопки сохранения.