我在我的asp.net项目中使用免费的jqgrid v4.9.2。在我的jqgrid中，我实现了一个功能是，在选择行上，选中的行变得可编辑。除了一个条件外，一切都很好。当我第一次选择行时，它也可以编辑和选择。 但是当我按下＆＃39; ESC＆＃39;取消行编辑时键，然后再次选择＆＃34; THAT＆＃34;要编辑的行，它会转换为可编辑模式，但不会被选中。
所以当我按下删除按钮时，行没有被删除，因为它没有被选中，但我选择了那一行。
为了更多地理解，这是我的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.
}
我谷歌很多，为此找到解决方案，但我没有找到任何相关的解决方案。我很感激，如果有人解决我的问题，请解决我的问题。谢谢
答案 0 :(得分：2)
您的代码包含许多可疑部分。最可疑的是在'jqg1'中使用了修复loadComplete rowid。你可以很容易地重复id。我建议您使用var newId = $.jgrid.randId();生成唯一的我们，然后使用addRowData中的ID。通常使用addRow。您可以使用initdata addRow参数来指定默认值。
此外，我强烈建议您使用inlineEditing参数指定所有调用中使用的内联编辑选项。您使用的当前代码使用editRow的{strong>不同选项进行loadComplete和onSelectRow内部的调用。一个使用afterrestorefunc另一个不使用。所以第一行中的 ESC 键与其他行的工作方式不同。
代码中还有一个问题：您在代码的许多位置使用selrow。 为什么？您可以在$(this).closest("tr.jqgrow").attr("id") blur内使用change获取当前行的rowid 。您可以在其他情况下使用oGrid.jqGrid("getGridParam", "savedRow")[0].id。您当前的代码要求将选择编辑行。如果您不更改代码，则确实需要使用singleSelectClickMode: "selectonly"选项。
如果上述内容没有任何帮助，那么您应该提供演示和分步说明，该说明可用于在演示中重现问题。