我有一个关于 jqgrid 的问题。为了在我的网格中编辑一行,您必须选择使用操作格式化程序的编辑按钮。这使得几乎整行都可以编辑。
我的问题是,如果用户单击另一个行编辑按钮,而不是当前可编辑行上的取消或提交按钮,有没有办法将第一个可编辑行返回到不可编辑状态,同时保持新选择的行可编辑?
如果您想检查,这里是网格。相当大量的代码。数据通过函数传递到网格。这是大型 MVC 应用程序的一部分。数据为json格式。
将不胜感激有关前进方向的建议。
grid.jqGrid({
datatype: "local",
data: gridData,
colNames: ['Action', 'ID', 'Center', 'DBA', 'Check Number', 'Received Date', 'Check Amount', 'Unposted Amount', 'Posted Amount', 'Comments', 'Check Date', 'Received By', 'Withdrawn By', 'Withdrawal Date', 'Witness', 'Is Posted?', 'Is NSed?', 'Refunded Amount', 'Batch Number'],
colModel: [
{ name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions',
formatoptions: { keys: true,
delbutton: false,
extraparam: { CheckLogId: getChecklogId, IsPosted: getIsPosted, CheckAmountPosted: getCheckAmountPosted, BatchNumberSequence: getBatchSeqNumber, IsNSed: getIsNSed },
afterSave: afterEditSave,
onSuccess: afterOnSuccess,
afterRestore: function (rowid) {
var acc_list = getAccountDBAOnCenter(last_center);
grid.setColProp('AccountId', { editoptions: { value: convertToSelectList(acc_list)} });
grid.trigger('reloadGrid');
if (!isCurrentUserAdmin) {
grid.setCell(rowid, 2, '', { 'visibility': 'visible' });
}
},
onEdit: function (rowid) {
edit_row_id = rowid;
grid.trigger('reloadGrid');
if (grid.getCell(rowid, 'IsPosted') == true) {
var checkAmountInput = '#' + rowid + '_CheckAmount';
$(checkAmountInput).prop("disabled", true);
}
else {
var checkAmountInput = '#' + rowid + '_CheckAmount';
$(checkAmountInput).prop("disabled", false);
}
if (!isCurrentUserAdmin) {
grid.setCell(rowid, 'CenterId', '', { 'visibility': 'hidden' });
}
checklog_id = grid.getCell(rowid, 'CheckLogId');
batch_sql_num = grid.getCell(rowid, 'BatchNumberSequence');
is_posted = grid.getCell(rowid, 'IsPosted');
check_amount_posted = grid.getCell(rowid, 'CheckAmountPosted');
check_amount_refunded = grid.getCell(rowid, 'CheckAmountRefunded');
is_nsed = grid.getCell(rowid, 'IsNSed');
batch_sql_num = batch_sql_num == '' ? '-' : batch_sql_num;
}
}
},
{ name: "CheckLogId", index: "CheckLogId", width: 40, align: "center", editable: false, hidden: true, editrules: { required: true, edithidden: true }, search: false },
{ name: "CenterId", index: "CenterId", width: 200, align: "left", editrules: { required: true },
editable: true,
formatter: 'select',
edittype: 'select',
editoptions: {
value: getSelectList(center_list),
style: 'width:190px',
dataInit: function (elem) {
var center_id = $(elem).val();
if (center_id == '') {
center_id = $("#center_id").val();
}
last_center = center_id;
var list_data = getAccountDBAOnCenter(center_id);
grid.setColProp('AccountId', { editoptions: { value: convertToSelectList(list_data)} });
},
dataEvents: [
{
type: 'change',
fn: function (e) {
resetAccountDBAValues();
var center_id = parseInt($(e.target).val(), 10);
var dba_select_list = getAccountDBAOnCenter(center_id);
var newOptions = '';
$.each(dba_select_list, function (i, dbaRecord) {
newOptions += '<option role="option" value="' +
dbaRecord.AccountId + '">' +
dbaRecord.DBAName + '</option>';
});
if ($(e.target).is('.FormElement')) {
var form = $(e.target).closest('form.FormGrid');
var acccountElm = form.find("select#AccountId.FormElement");
acccountElm.removeAttr("disabled");
acccountElm.html(newOptions);
} else {
var row = $(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
$("select#" + rowId + "_AccountId", row[0]).html(newOptions);
}
}
}
]
}, search: false
},
{ name: "AccountId", index: "AccountId", width: 200, align: "left", formatter: 'select', editable: true, editrules: { required: true },
edittype: 'select',
editoptions: { value: dba_select_list_json, style: 'width:190px' },
search: true
},
{ name: "CheckNumber", index: "CheckNumber", width: 110, align: "left", editable: true, editrules: { required: true }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px' }, search: false },
{ name: "ReceivedDate", index: "ReceivedDate", width: 100, align: "center", datefmt: 'm/d/yy', formatter: jsonDateFormatter, editable: true, editrules: { date: false, required: true, custom: true, custom_func: dateValidate }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px', dataInit: function (element) { $(element).datepicker({ dateFormat: 'm/d/yy', changeYear: true, changeMonth: true }) } }, search: false },
{ name: "CheckAmount", index: "CheckAmount", width: 110, align: "left", formatter: 'currency', editable: true, editrules: { required: true, number: true }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px' }, formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$" }, search: false },
{ name: "CheckAmountUnposted", index: "CheckAmountUnposted", width: 120, align: "center", formatter: uPostFormatter, editable: false, editrules: { required: true, edithidden: true }, formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$" }, search: false },
{ name: "CheckAmountPosted", index: "CheckAmountPosted", width: 120, align: "center", formatter: 'currency', editable: false, editrules: { required: true, edithidden: true }, formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$" }, search: false },
{ name: "CheckDescription", index: "CheckDescription", width: 180, align: "left", editable: true, editrules: { required: false }, edittype: 'text', editoptions: { size: 100, maxlength: 100, style: 'width:200px' }, search: false },
{ name: "CheckDate", index: "CheckDate", width: 100, align: "center", formatter: jsonDateFormatter, editable: true, editrules: { required: true, custom: true, custom_func: checkValidation }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px', dataInit: function (element) { $(element).datepicker({ dateFormat: 'm/d/yy', changeYear: true, changeMonth: true }) } } },
{ name: "ReceivedBy", index: "ReceivedBy", width: 120, align: "left", editable: true, editrules: { required: true }, edittype: 'text', editoptions: { size: 15, maxlength: 15, style: 'width:110px' }, search: false },
{ name: "WithdrawnBy", index: "WithdrawnBy", width: 120, align: "left", editable: true, editrules: { required: false }, edittype: 'text', editoptions: { size: 15, maxlength: 15, style: 'width:110px' }, search: false },
{ name: "WithdrawnDate", index: "WithdrawnDate", width: 100, align: "center", datefmt: 'm/d/yy', formatter: jsonDateFormatter, editable: true, editrules: { date: false, required: false, custom: true, custom_func: dateValidate }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px', dataInit: function (element) { $(element).datepicker({ dateFormat: 'm/d/yy', changeYear: true, changeMonth: true }) } }, search: false },
{ name: "WitnessedBy", index: "WitnessedBy", width: 120, align: "left", editable: true, editrules: { required: false }, edittype: 'text', editoptions: { size: 15, maxlength: 15, style: 'width:110px' }, search: false },
{ name: "IsPosted", index: "IsPosted", width: 75, align: "center", editable: false, formatter: booleanFormatter, unformat: booleanUnFormatter, editrules: { required: true, edithidden: true }, search: false },
{ name: "IsNSed", index: "IsNSed", width: 75, align: "center", editable: false, formatter: booleanFormatter, unformat: booleanUnFormatter, editrules: { required: true, edithidden: true }, search: false },
{ name: "CheckAmountRefunded", index: "CheckAmountRefunded", width: 120, align: "center", formatter: 'currency', editable: false, editrules: { required: true, edithidden: true }, formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$" }, search: false },
{ name: "BatchNumberSequence", index: "BatchNumberSequence", width: 120, align: "left", editable: false, edittype: 'text', search: false }
],
pager: '#checklog-table-pager',
rowNum: 25,
rowList: [25, 50, 75, 100, 1000000],
gridview: true,
rownumbers: false,
ignoreCase: true,
viewrecords: true,
width: 1040,
height: 400,
autowidth: false,
shrinkToFit: false,
scrolling: true,
loadonce: false,
editurl: '/Payment/SaveChecklog',
loadComplete: loadGridComplete,
ondblClickRow: function (rowid, iRow, iCol, e) {
if (grid.getCell(rowid, 'IsNSed') == false) {
if (showPaymentCallBack) {
showPaymentCallBack(rowid);
}
}
}
}).jqGrid('navGrid', '#checklog-table-pager',
{ add: true, edit: false, del: false },
{},
{
caption: 'Add',
recreateForm: true,
mtype: "post",
width: 520,
addCaption: "Add Check",
reloadAfterSubmit: true,
closeAfterAdd: true,
bSubmit: "Save",
onclickSubmit: beforeAdd,
afterSubmit: addComplete,
beforeShowForm: beforeShowAdd
},
{},
{ multipleSearch: true, overlay: false }
).navButtonAdd("#checklog-table-pager", {
caption: 'Export',
title: 'Export to Excel',
buttonicon: 'ui-icon-extlink',
onClickButton: function () {
var fileName = 'checklog_for_center_' + center_id + '.xls';
var dataUrl = 'PaymentService/GetCheckLog';
var searchParameters = getCheckLogIds();
$("#checklog-table").jqGrid('excelExport', { url: '/Spreadsheet/Index?fileName=' + fileName + '&dataUrl=' + dataUrl + '&filter=' + searchParameters });
}
});
$("#checklog-table-pager table.navtable tbody tr").append(
'<td><div><input type="checkbox" class="searchClosedBox" id="navSearchClosedBox"/>NLO Deal</div></td>');
$(".searchClosedBox").change(function () {
if ($(this).is(':checked')) {
search_closed = true;
var acc_list = getAccountDBAOnCenter($("#center_id").val());
dba_select_list_json = acc_list;
dba_list = acc_list;
grid.setColProp('AccountId', { editoptions: { value: convertToSelectList(acc_list)} });
grid.trigger('reloadGrid');
}
else {
search_closed = false;
var acc_list = getAccountDBAOnCenter($("#center_id").val());
dba_select_list_json = acc_list;
dba_list = acc_list;
grid.setColProp('AccountId', { editoptions: { value: convertToSelectList(acc_list)} });
grid.trigger('reloadGrid');
}
})