free-jqgrid，在按转义键取消行编辑后，当我再次通过选择该行进行编辑时，它不再保持选中状态
free-jqgrid, after cancel row edit by escape key press, when I again edit by just selecting that row, it no longer remain set selected
我在我的 asp.net 项目中使用免费的 jqgrid v4.9.2。在我的 jqgrid 中，我实现了一个功能，在 select 行上，selected 行变得可编辑。除一种情况外，一切正常。当我第一次 select 行时，它变得可编辑和 selected 了。 但是当我通过按 'ESC' 键取消行编辑并再次 select "THAT" 行进行编辑时，它会转换为可编辑模式但不会 selected.
所以当我按下删除按钮时，行没有被删除，因为它不是 selected 但我已经 selected 那行。
为了加深理解，这是我的 jqgrid 代码：
function RenderIGPLotDetailsGrid() {
var oGrid = $('#tbIGPLD'), topPagerSelector = '#' + $.jgrid.jqID(oGrid[0].id) + "_toppager", lastSel;
oGrid.jqGrid({
url: sRelativePath + '/Ajax.asmx/GetDataForGrid',
mtype: "POST",
datatype: "json",
ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
serializeGridData: function (data) {
return JSON.stringify(data);
},
jsonReader: {
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records"
},
colNames: ['UOMId', 'Lot #', 'Wt/Pkg.(Kgs)', 'No. of pkgs.', 'Pkg. type', 'Total Weight'],
colModel: [
{ name: 'UOMId', index: 'UOMId', hidden: true },
{ name: 'LotNo', index: 'LotNo', editable: ($('#hftbIsManualLotNo').val() === '1'), editrules: { required: ($('#hftbIsManualLotNo').val() === '1') }, width: 50 },
{ name: 'GrossWeight', index: 'GrossWeight', template: editNumTemplate, width: 16, editoptions: { maxlength: 18} },
{ name: 'Qty', index: 'Qty', template: editNumTemplate, width: 15, editoptions: { maxlength: 18 },
editoptions: {
dataInit: function (domElem) {
$(domElem).on("blur", function () {
var iQty = $.trim($(this).val());
var selrow = oGrid.jqGrid('getGridParam', 'selrow');
var value = $('#' + selrow + '_GrossWeight').val() * iQty;
$('#' + selrow + '_TotalGrossWeight').val(value);
});
}
}
},
{name: 'UOM', index: 'UOM', template: colTemplate, width: 25, editable: true, edittype: 'select', formatter: 'select',
editrules: {
required: true,
custom: true,
custom_func: function (value) {
if (value === g_sValueNONE)
return [false, "Selected UOM is invalid UOM. Please select a valid UOM before saving."];
else
return [true, ""];
}
},
editoptions:
{
value: eval('(' + g_oUOMList + ')'),
dataEvents: [
{ type: 'keyup', fn: function (e) { $(e.target).trigger('change'); } },
{
type: 'change',
fn: function (e) {
if (!e.isTrigger) {
var selrow = oGrid.jqGrid('getGridParam', 'selrow');
var uomId = $(this).val();
oGrid.jqGrid('setCell', selrow, 'UOMId', uomId);
}
}
}
]
}
},
{ name: 'TotalGrossWeight', index: 'TotalGrossWeight', template: editNumTemplate, width: 15, editoptions: { maxlength: 18 },
//Place this code in the col options of the last column in your grid
// it listens for the tab button being pressed
editoptions: {
dataInit: function (elem) { $(elem).focus(function () { this.select(); }) },
dataEvents: [
{
type: 'keydown',
fn: function (e) {
var key = e.charCode || e.keyCode;
if (key == 9)//tab
{
var iSalRow = oGrid.jqGrid('getGridParam', 'selrow');
//Save editing for current row.
oGrid.jqGrid('saveRow', iSalRow, { aftersavefunc: function (rowid) { SaveIGPLotDetails(oGrid, rowid); } });
//Made flag true to add new row after save opration grid reload
g_bIsTabClick = true;
}
}
}
]
}
}
],
prmNames: { page: "pageIndex", rows: "pageSize", sort: "sortIndex", order: "sortDirection", search: "_search" },
autowidth: true,
search: false,
postData: {
filters: null,
spName: 'GetIGPLotDetailsList',
paramXML: $xmlDoc.html().toString()
},
width: 'auto',
height: 'auto',
rowNum: 20,
rowList: [20, 50, 100, 150, 200],
sortname: '',
sortorder: 'asc',
page: 1,
gridview: true,
toppager: true,
autoencode: true,
ignoreCase: true,
viewrecords: true,
caption: 'Lot Details',
editurl: 'clientArray',
footerrow: true,
loadComplete: function (data) {
updateJqGridButtonState($(this), jqGridMode.None)
// During first time save, by default adding one editable row
if (data.d.rows.length <= 0) {
oGrid.jqGrid('addRowData', 'jqg1', g_oColDefValues, 'first');
oGrid.jqGrid('editRow', 'jqg1', { keys: true, aftersavefunc: function (rowid) { SaveIGPLotDetails($("#tbIGPLD"), rowid); } });
oGrid.jqGrid("setSelection", 'jqg1', true);
}
//To create new rowm after pressing tab on last column of grid.
if (g_bIsTabClick) {
AddNewRow(oGrid);
g_bIsTabClick = false;
}
},
gridComplete: function () {
$("table#tbIGPLD tr:last").addClass('ireg-jqgrid-lastrow');
$("tr.footrow td").addClass('ireg-jqgrid-lastrow').addClass('ireg-jqgrid-footer');
recalculateWidthInPercent('container', 'tbIGPLD', 0.98);
var decTotalGrossWeight = $(this).jqGrid('getCol', 'TotalGrossWeight', false, 'sum');
var decQty = $(this).jqGrid('getCol', 'Qty', false, 'sum');
$(this).jqGrid('footerData', 'set', { TotalGrossWeight: decTotalGrossWeight, Qty: decQty });
parent.g_decItemGrossWeight = decTotalGrossWeight;
},
//**Here it is a code which converts row into editable mode**
onSelectRow: function (rowid) {
// oSavedRows array is not empty if some row is in inline editing mode.
var oSavedRows = oGrid.jqGrid("getGridParam", "savedRow");
if (oSavedRows.length > 0) {
// 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.
oGrid.jqGrid("restoreRow", oSavedRows[0].id);
}
oGrid.jqGrid("editRow", rowid, { keys: true,
aftersavefunc: function (rowid) {
SaveIGPLotDetails($("#tbIGPLD"), rowid);
},
afterrestorefunc: function (rowid) {
var iRow = getRowIndex(rowid);
if (!isValidGuid(rowid) && iRow !== 1)
oGrid.delRowData(rowid);
}
});
}
}).jqGrid('navGrid', topPagerSelector, { add: false, edit: false, del: true, search: false, refresh: false
Removed addParams & editParams because now rows will get editable based on click and will save on enter.
}, {}, {}, myDelParams, {}).jqGrid('inlineNav', topPagerSelector, {});
//iReg-2004: Removed all buttons expect delete
$("#" + $('#tbIGPLD')[0].id + "_top_iledit").remove();
$("#" + $('#tbIGPLD')[0].id + "_top_ilsave").remove();
$("#" + $('#tbIGPLD')[0].id + "_top_iladd").remove();
$("#" + $('#tbIGPLD')[0].id + "_top_ilcancel").remove(); // #tbItems_top_ilcancel
$("#" + $('#tbIGPLD')[0].id + "_top_ildelete").remove();
$('.ui-separator').remove(); // Separator after the delete button.
}
我google 找了很多解决方案，但我没有找到任何相关的解决方案。我很感激，如果有人解决我的这个问题。谢谢
您的代码包含很多可疑的部分。最值得怀疑的是在loadComplete中使用fix 'jqg1' rowid。您可以轻松拥有 id 重复项。我建议您使用 var newId = $.jgrid.randId(); 生成唯一的 us，然后在 addRowData 中使用 id。一般使用addRow。您可以使用 addRow 的 initdata 参数来指定默认值。
此外，我强烈建议您使用 inlineEditing 参数来指定所有调用中使用的内联编辑选项。您使用的当前代码在 loadComplete 和 onSelectRow 中使用 editRow 的 不同选项 进行调用。一个使用 afterrestorefunc 另一个不使用。所以第一行中的 ESC 键的工作方式与其他行中的不同。
您的代码中还有一个问题：您在代码的许多地方使用了 selrow。 为什么？ 例如，您可以在 blur change 中使用 $(this).closest("tr.jqgrow").attr("id") 来获取当前行的 rowid .您可以在其他情况下使用 oGrid.jqGrid("getGridParam", "savedRow")[0].id。您当前的代码要求选择编辑行。如果您不更改代码，那么确实需要使用 singleSelectClickMode: "selectonly" 选项。
如果以上都没有帮助，那么您应该提供 演示 和可用于在演示中重现问题的分步说明。
我在我的 asp.net 项目中使用免费的 jqgrid v4.9.2。在我的 jqgrid 中，我实现了一个功能，在 select 行上，selected 行变得可编辑。除一种情况外，一切正常。当我第一次 select 行时，它变得可编辑和 selected 了。 但是当我通过按 'ESC' 键取消行编辑并再次 select "THAT" 行进行编辑时，它会转换为可编辑模式但不会 selected.
所以当我按下删除按钮时，行没有被删除，因为它不是 selected 但我已经 selected 那行。
为了加深理解，这是我的 jqgrid 代码：
function RenderIGPLotDetailsGrid() {
var oGrid = $('#tbIGPLD'), topPagerSelector = '#' + $.jgrid.jqID(oGrid[0].id) + "_toppager", lastSel;
oGrid.jqGrid({
url: sRelativePath + '/Ajax.asmx/GetDataForGrid',
mtype: "POST",
datatype: "json",
ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
serializeGridData: function (data) {
return JSON.stringify(data);
},
jsonReader: {
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records"
},
colNames: ['UOMId', 'Lot #', 'Wt/Pkg.(Kgs)', 'No. of pkgs.', 'Pkg. type', 'Total Weight'],
colModel: [
{ name: 'UOMId', index: 'UOMId', hidden: true },
{ name: 'LotNo', index: 'LotNo', editable: ($('#hftbIsManualLotNo').val() === '1'), editrules: { required: ($('#hftbIsManualLotNo').val() === '1') }, width: 50 },
{ name: 'GrossWeight', index: 'GrossWeight', template: editNumTemplate, width: 16, editoptions: { maxlength: 18} },
{ name: 'Qty', index: 'Qty', template: editNumTemplate, width: 15, editoptions: { maxlength: 18 },
editoptions: {
dataInit: function (domElem) {
$(domElem).on("blur", function () {
var iQty = $.trim($(this).val());
var selrow = oGrid.jqGrid('getGridParam', 'selrow');
var value = $('#' + selrow + '_GrossWeight').val() * iQty;
$('#' + selrow + '_TotalGrossWeight').val(value);
});
}
}
},
{name: 'UOM', index: 'UOM', template: colTemplate, width: 25, editable: true, edittype: 'select', formatter: 'select',
editrules: {
required: true,
custom: true,
custom_func: function (value) {
if (value === g_sValueNONE)
return [false, "Selected UOM is invalid UOM. Please select a valid UOM before saving."];
else
return [true, ""];
}
},
editoptions:
{
value: eval('(' + g_oUOMList + ')'),
dataEvents: [
{ type: 'keyup', fn: function (e) { $(e.target).trigger('change'); } },
{
type: 'change',
fn: function (e) {
if (!e.isTrigger) {
var selrow = oGrid.jqGrid('getGridParam', 'selrow');
var uomId = $(this).val();
oGrid.jqGrid('setCell', selrow, 'UOMId', uomId);
}
}
}
]
}
},
{ name: 'TotalGrossWeight', index: 'TotalGrossWeight', template: editNumTemplate, width: 15, editoptions: { maxlength: 18 },
//Place this code in the col options of the last column in your grid
// it listens for the tab button being pressed
editoptions: {
dataInit: function (elem) { $(elem).focus(function () { this.select(); }) },
dataEvents: [
{
type: 'keydown',
fn: function (e) {
var key = e.charCode || e.keyCode;
if (key == 9)//tab
{
var iSalRow = oGrid.jqGrid('getGridParam', 'selrow');
//Save editing for current row.
oGrid.jqGrid('saveRow', iSalRow, { aftersavefunc: function (rowid) { SaveIGPLotDetails(oGrid, rowid); } });
//Made flag true to add new row after save opration grid reload
g_bIsTabClick = true;
}
}
}
]
}
}
],
prmNames: { page: "pageIndex", rows: "pageSize", sort: "sortIndex", order: "sortDirection", search: "_search" },
autowidth: true,
search: false,
postData: {
filters: null,
spName: 'GetIGPLotDetailsList',
paramXML: $xmlDoc.html().toString()
},
width: 'auto',
height: 'auto',
rowNum: 20,
rowList: [20, 50, 100, 150, 200],
sortname: '',
sortorder: 'asc',
page: 1,
gridview: true,
toppager: true,
autoencode: true,
ignoreCase: true,
viewrecords: true,
caption: 'Lot Details',
editurl: 'clientArray',
footerrow: true,
loadComplete: function (data) {
updateJqGridButtonState($(this), jqGridMode.None)
// During first time save, by default adding one editable row
if (data.d.rows.length <= 0) {
oGrid.jqGrid('addRowData', 'jqg1', g_oColDefValues, 'first');
oGrid.jqGrid('editRow', 'jqg1', { keys: true, aftersavefunc: function (rowid) { SaveIGPLotDetails($("#tbIGPLD"), rowid); } });
oGrid.jqGrid("setSelection", 'jqg1', true);
}
//To create new rowm after pressing tab on last column of grid.
if (g_bIsTabClick) {
AddNewRow(oGrid);
g_bIsTabClick = false;
}
},
gridComplete: function () {
$("table#tbIGPLD tr:last").addClass('ireg-jqgrid-lastrow');
$("tr.footrow td").addClass('ireg-jqgrid-lastrow').addClass('ireg-jqgrid-footer');
recalculateWidthInPercent('container', 'tbIGPLD', 0.98);
var decTotalGrossWeight = $(this).jqGrid('getCol', 'TotalGrossWeight', false, 'sum');
var decQty = $(this).jqGrid('getCol', 'Qty', false, 'sum');
$(this).jqGrid('footerData', 'set', { TotalGrossWeight: decTotalGrossWeight, Qty: decQty });
parent.g_decItemGrossWeight = decTotalGrossWeight;
},
//**Here it is a code which converts row into editable mode**
onSelectRow: function (rowid) {
// oSavedRows array is not empty if some row is in inline editing mode.
var oSavedRows = oGrid.jqGrid("getGridParam", "savedRow");
if (oSavedRows.length > 0) {
// 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.
oGrid.jqGrid("restoreRow", oSavedRows[0].id);
}
oGrid.jqGrid("editRow", rowid, { keys: true,
aftersavefunc: function (rowid) {
SaveIGPLotDetails($("#tbIGPLD"), rowid);
},
afterrestorefunc: function (rowid) {
var iRow = getRowIndex(rowid);
if (!isValidGuid(rowid) && iRow !== 1)
oGrid.delRowData(rowid);
}
});
}
}).jqGrid('navGrid', topPagerSelector, { add: false, edit: false, del: true, search: false, refresh: false
Removed addParams & editParams because now rows will get editable based on click and will save on enter.
}, {}, {}, myDelParams, {}).jqGrid('inlineNav', topPagerSelector, {});
//iReg-2004: Removed all buttons expect delete
$("#" + $('#tbIGPLD')[0].id + "_top_iledit").remove();
$("#" + $('#tbIGPLD')[0].id + "_top_ilsave").remove();
$("#" + $('#tbIGPLD')[0].id + "_top_iladd").remove();
$("#" + $('#tbIGPLD')[0].id + "_top_ilcancel").remove(); // #tbItems_top_ilcancel
$("#" + $('#tbIGPLD')[0].id + "_top_ildelete").remove();
$('.ui-separator').remove(); // Separator after the delete button.
}
我google 找了很多解决方案，但我没有找到任何相关的解决方案。我很感激，如果有人解决我的这个问题。谢谢
您的代码包含很多可疑的部分。最值得怀疑的是在loadComplete中使用fix 'jqg1' rowid。您可以轻松拥有 id 重复项。我建议您使用 var newId = $.jgrid.randId(); 生成唯一的 us，然后在 addRowData 中使用 id。一般使用addRow。您可以使用 addRow 的 initdata 参数来指定默认值。
此外，我强烈建议您使用 inlineEditing 参数来指定所有调用中使用的内联编辑选项。您使用的当前代码在 loadComplete 和 onSelectRow 中使用 editRow 的 不同选项 进行调用。一个使用 afterrestorefunc 另一个不使用。所以第一行中的 ESC 键的工作方式与其他行中的不同。
您的代码中还有一个问题：您在代码的许多地方使用了 selrow。 为什么？ 例如，您可以在 blur change 中使用 $(this).closest("tr.jqgrow").attr("id") 来获取当前行的 rowid .您可以在其他情况下使用 oGrid.jqGrid("getGridParam", "savedRow")[0].id。您当前的代码要求选择编辑行。如果您不更改代码，那么确实需要使用 singleSelectClickMode: "selectonly" 选项。
如果以上都没有帮助，那么您应该提供 演示 和可用于在演示中重现问题的分步说明。