Ativando o botão Salvar na Grade JQ com InlineEditing e CellEdit
Oi eu tenho uma grade que está usando célula editar e edição embutida. Ele salva no ClientArray
$('#list').jqGrid({
datatype: "local",
colNames: ["Parameter Id", "Parameter Name", 'Parameter Value'],
colModel: [
{ name: "Id", index: "Id", align: "left", key: true, editable: false,hidden:true, jmap: 0 },
{ name: "ParameterName", index: "ParameterName", align: "left", editable: false, jmap: 1 },
{ name: "ParameterValue", index: "ParameterValue", align: "left", editable: true, edittype: "text", editoptions: { maxlength: 100 }, editrules: {required: true }, jmap: 2 }
],
pager: "#pager",
rowNum: 100,
rowList: [],
pgbuttons: false, // disable page control like next, back button
pgtext: null, // disable pager text like 'Page 0 of 10'
viewrecords: true, // disable current view record text like 'View 1-10 of 100'
height: '100%',
scrollOffset: 0,
sortname: "Name",
sortorder: "Asc",
gridview: true,
caption: 'Parameters',
autowidth: true,
hidegrid: false,
loadonce: true,
//beforeEditCell: function () {
// $("#list_ilsave").removeClass('ui-state-disabled');
// return;
//},
//afterEditCell: function (rowid, cellname, value, iRow, iCol) {
// $('#list').jqGrid('getCell', rowid, iCol).focus();
// return;
//},
width: totalWidth,
cellEdit: true,
cellsubmit: "clientArray"
});
$('#list').jqGrid('inlineNav', '#pager', {
edit: false,
add: false,
del: false,
save: true,
savetext: 'Save',
cancel: false
});
Quando edito uma célula, o botão Salvar permanece desativado. Se eu habilitar manualmente o botão no beforeCellEdit, a célula editável não terá foco até você selecionar outra célula. Esse comportamento está acontecendo apenas no IE.
Tentei corrigir esses dois problemas individualmente no código comentado e descobri que a perda de foco é causada pela linha
$("#list_ilsave").removeClass('ui-state-disabled');
Tentei colocar esta linha no beforeEditCell e no afterEditCell e isso faz com que o campo de entrada perca o foco.
Eu estava usando o JQ Grid 4.4.4 e tentei atualizar para a 4.6.0 depois de ler que havia atualizações na edição embutida após a 4.4.4
ATUALIZAR Alterei minha grade para usar o onSelectRow
onSelectRow: function (rowid) {
var $grid = $('#list');
var iRow = $("#" + rowid)[0].rowIndex;
$grid.jqGrid('editRow', rowid, {
keys: true,
oneditfunc: function(rowid, response) {
var $saveButton = $("#list_ilsave");
if ($saveButton.hasClass('ui-state-disabled')) {
$saveButton.removeClass('ui-state-disabled');
}
markCellAsDirty(rowid, $grid);
return true;
},
successfunc: function() {
alert('success');
return true;
},
aftersavefunc: function() {
alert('after save');
return true;
},
errorfunc: function() {
alert('error');
return true;
}
});
},
cellsubmit: "clientArray"
Mas não consigo disparar nenhum dos eventos editRow que não sejaoneditfunc
. Eu também tenho um problema ao obter as células alteradas.
Este método marca as células como sujas / editadas
function markCellAsDirty(rowid, grid) {
$(grid.jqGrid("setCell", rowid, "ParameterValue", "", "dirty-cell"));
$(grid[0].rows.namedItem(rowid)).addClass("edited");
}
Eu tento obter as células editadas da seguinte maneira
var editedRows = $grid.getChangedCells('dirty');
Antes de postar o EditRows em um método AJAX no meu servidor.