jQGrid reload grid after save inline button click
I was looking here to find out how to reload grid after save row:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing
JQGrid setRowData After inline edit
The afterInsertRow : function(ids) method is not executing when I use gridview:true
So i come up with this solution:
onSelectRow: function (id) {
var tr;
if (id && id !== lastSel) {
if (typeof lastSel !== "undefined") {
grid.jqGrid('restoreRow', last开发者_如何学运维Sel);
//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;
}
},
I am using Actions 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
}
}
Grid properties
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 });
Predefined functions
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");
};
It is working but the problem is, grid getting reloaded every time after row clicked but not after save button clicked. It is not right behavior because there is no reason to process unreasonable server request and reload grid on each row click.
How may i change that behavior? I want to reload grid only on save button click.
It seems to me, that you should just include $("#Grid1").trigger("reloadGrid");
or $("#Grid1").trigger("reloadGrid",[{current:true}]);
in the hideDelIcon
function:
hideDelIcon = function (rowid) {
setTimeout(function () {
$("tr#" + $.jgrid.jqID(rowid) + " div.ui-inline-del").hide();
// the next line should be added
$("#Grid1").trigger("reloadGrid",[{current:true}]);
}, 50);
}
精彩评论