javascript - 删除带有本地数据的 jqGrid 行会导致单元格不可单击

Question

我的 jqGrid 出现问题。

• 它正在使用本地数据
• 设置为允许内联(单元格编辑)

当我使用 delRowData 方法删除一行(仅限本地)时，该行将按预期删除。但是，当我删除几行时，内联单元格编辑似乎停止工作。

发生这种情况时，我在 chrome 调试窗口中看不到任何错误。我已经设置了一个 fiddle here

这是网格定义

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int",
        editable : false
    }, {
        name: 'thingy',
        index: 'thingy',
        width: 90,
        sorttype: "date",
        editable : true,
        edittype : 'text'
    }, {
        name: 'blank',
        index: 'blank',
        width: 30,
        editable : true,
        edittype : 'text'
    }, {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float",
        editable : true,
        edittype : 'text'
    }, {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float",
        editable : true,
        edittype : 'text'
    }],
    caption: "Stack Overflow Example",
    cellEdit    : true,
    cellsubmit  : 'clientArray'
});

这是我的删除方法。我已经尽可能简单了。它总是删除第一行。

function deleteRow() {
    var ids = $("#grid").jqGrid('getDataIDs');
    $("#grid").jqGrid('delRowData', ids[0]);
}

Answer 1

问题如下:jqGrid 的单元格编辑是这样编写的，以便它主要使用行索引(请参阅 here )而不是 rowids。 jqGrid的一些内部结构(savedRows和iRow选项)和可编辑单元格的id将被分配基于可编辑行索引构造的值。因此，删除网格中的一行后，需要更新信息。

我将您的 jsfiddle 演示修改为以下内容:http://jsfiddle.net/OlegKi/wdwdxLuk/14/ 。如果单击“删除网格的第一行”按钮，它会使用以下 deleteRow 代码:

function deleteRow() {
    var $grid = $("#grid"), editingTr, rows, iRow, editingColumnName,
        p = $grid.jqGrid("getGridParam"), // get reference to object with jqGrid options
        savedRows = p.savedRow, //{id:iRow, ic:iCol, name:nm, v:cellData};
        colModel = p.colModel;

    if ($grid.length > 0 && $grid[0].rows.length > 1) {
        rows = $grid[0].rows;
        editingTr = savedRows.length > 0 ? rows[savedRows[0].id] : undefined;
        // delete the row
        $("#grid").jqGrid('delRowData', rows[1].id); // delete the first row (rows[0] don't contains any data)
        if (editingTr !== undefined) {
            // update the index of the editing row
            iRow = editingTr.rowIndex;
            if (iRow < 0) {
                // editing row way deleted from the grid
                p.savedRow = [];
                delete p.iRow;
                delete p.iCol;
            } else {
                // update the row index in savedRows
                editingColumnName = colModel[savedRows[0].ic].name;
                $(editingTr).find("#" + savedRows[0].id + "_" + $.jgrid.jqID(editingColumnName))
                    .attr("id", iRow + "_" + editingColumnName);
                savedRows[0].id = iRow;
                // update row index of selected row
                p.iRow = iRow;
            }
        }
    }
}