使用本地数据删除jqGrid行会导致无法访问的单元格

时间:2014-11-26 03:50:11

标签: javascript jqgrid

我的jqGrid出了问题。

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

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

发生这种情况时,我在Chrome调试窗口中看不到任何错误。我设置了一个小提琴 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]);
}

1 个答案:

答案 0 :(得分:1)

问题如下:编写jqGrid的单元格编辑,使其主要用于行索引(请参阅here)而不是rowid。 jqGrid(savedRowsiRow选项)的一些内部结构和可编辑单元格的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;
            }
        }
    }
}