使用本地数据删除jqGrid行会导致无法访问的单元格 [英] Deleting jqGrid rows with local data results in unclickable cells

问题描述

我的jqGrid有问题。

I'm having a problem with my jqGrid.

• 使用本地数据


• 设置为允许内联（单元格编辑）

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

When I delete a row (locally only) using the delRowData method, the row is deleted as expected. However when I delete a couple of rows, the inline cell editing seems to stop working.

当发生这种情况时，我在chrome调试窗口中看不到任何错误。我设置了一个小提琴 这里

When this happens I don't see any errors in the chrome debug window. I've setup a 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'
});

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

Here is my delete method. I've made it as simple as I can. It just always deletes the first row.

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

推荐答案

问题如下：编写jqGrid的单元格编辑，使其主要用于行索引（请参阅此处） rowids。 jqGrid的一些内部结构（ savedRows 和 iRow 选项）和可编辑单元格的id将被赋值为基于可编辑行的索引构造。因此，在删除网格中的一行后，需要更新信息。

The problem is the following: cell editing of jqGrid are written so that it works mostly with row indexes (see here) instead of rowids. Some internal structures of jqGrid (savedRows and iRow options) and the id of editable cell will be assigned with the value which constructed based on the index of editable row. So after deleting of a row in the grid the information need be updated.

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

I modified your jsfiddle demo to the following: http://jsfiddle.net/OlegKi/wdwdxLuk/14/. It uses the following code of deleteRow called if one clicks on the button "Delete the first Row of the grid":

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;
            }
        }
    }
}

这篇关于使用本地数据删除jqGrid行会导致无法访问的单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！