jqGrid - 复选框编辑无法编辑所选行

在我的 jqGrid 中，我有一个也可用于编辑的复选框，即用户可以单击该复选框，并且该复选框的值将在数据库中更新。效果很好。但是，当我单击该复选框并尝试再次单击它时，什么都没发生。该行不会被保存。理论上应该保存复选框未选中的值。但这并没有发生。

我尝试过参考this奥列格的回答但这没有帮助。

奇怪的问题是，如果我选择另一行，然后尝试再次取消选择该复选框，我确实会看到保存请求。

我猜这是因为我正在尝试编辑当前选定的行。但我不确定我在这里做错了什么。

这就是我正在做的事情beforeSelectRow

beforeSelectRow: function (rowid, e) {
    var $target = $(e.target),
        $td = $target.closest("td"),
        iCol = $.jgrid.getCellIndex($td[0]),
        colModel = $(this).jqGrid("getGridParam", "colModel");
    if (iCol >= 0 && $target.is(":checkbox")) {
        if (colModel[iCol].name == "W3LabelSelected") {
            console.log(colModel[iCol].name);
            $(this).setSelection(rowid, true);
            $(this).jqGrid('resetSelection');
            $(this).jqGrid('saveRow', rowid, {
                succesfunc: function (response) {
                    $grid.trigger('reloadGrid');
                    return true;
                }
            });
        }
    }
    return true;
},

配置：

jqGrid版本：最新免费jqGrid

数据类型：Json 保存到服务器

最小电网代码: jsFiddle

EDIT:在奥列格的回答之后，这就是我到目前为止所得到的：

beforeSelectRow: function (rowid, e) {
    var $self = $(this),
        iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]),
        cm = $self.jqGrid("getGridParam", "colModel");
    if (cm[iCol].name === "W3LabelSelected") {
        //console.log($(e.target).is(":checked"));
        $(this).jqGrid('saveRow', rowid, {
            succesfunc: function (response) {
                $grid.trigger('reloadGrid');
                return true;
            }
        });
    }

    return true; // allow selection
}

这很接近我想要的。但是，如果我第一次和第二次选中该复选框，console.log每次都会被叫到。但是，那saveRow仅当我选中该复选框，然后再次单击它以取消选中它时，才会被调用，此后就不再调用。默认情况下，可以根据服务器发送的数据选中或取消选中该复选框。

在图中，请求是在选中复选框两次后发送的，而不是每次都发送。

UPDATE:根据@Oleg的建议，我已经实施了cellattr并在里面调用了一个函数。在函数中，我只需传递 rowid 并更新服务器上该 rowid 的复选框。

这是我使用的代码：

{
    name: 'W3LabelSelected',
    index: 'u.W3LabelSelected',
    align: 'center',
    width: '170',
    editable: false,
    edittype: 'checkbox',
    formatter: "checkbox",
    search: false,
    formatoptions: {
        disabled: false
    },
    editoptions: {
        value: "1:0"
    },
    cellattr: function (rowId, tv, rawObject, cm, rdata) {
        return ' onClick="selectThis(' + rowId + ')"';
    }
},

和我的 selectThis 函数：

function selectThis(rowid) {
    $.ajax({
        type: 'POST',
        url: myurl,
        data: {
            'id': rowid
        },
        success: function (data) {
            if (data.success == 'success') {
                $("#list").setGridParam({
                    datatype: 'json',
                    page: 1
                }).trigger('reloadGrid');
            } else {
                $("<div title='Error' class = 'ui-state-error ui-corner-all'>" + data.success + "</div>").dialog({});
            }
        }
    });
}

FIDDLE

我认为使用上有一个误区formatter: "checkbox", formatoptions: { disabled: false }。如果您以这种方式在网格列中创建非禁用复选框，那么用户只会看到该复选框，可以单击该复选框并可以更改其状态。另一方面什么都没发生如果用户更改复选框的状态。相反，复选框的初始状态对应于网格的输入数据，但是更改后的复选框会产生状态已更改的错觉，但不会自动执行任何操作。即使你使用datatype: "local"什么也没有发生，甚至本地数据也会在单击时更改。如果您确实需要根据更改复选框状态来保存更改，那么您必须实现额外的代码。答案演示了一种可能的实现。您可以更改某些复选框的状态对应的演示，然后更改页面并返回第一页。您将看到复选框的状态对应于最新的更改。

Now let us we try to start inline editing (start editRow) on select the row of the grid. First of all inline editing get the values from the rows (editable columns) using unformatter, saves the old values in internal savedRow parameter and then it creates new editing controls inside of editable cells on the place of old content. Everything is relatively easy in case of using standard disabled checkbox of formatter: "checkbox". jqGrid just creates enabled checkboxs on the place of disabled checkboxs. The user can change the state of the checkboxs or the content of any other editable columns and saves the changes by usage of Enter for example. After that the selected row will be saved and will be not more editable. You can monitor the changes of the state of the checkbox additionally (by usage editoptions.dataEvents with "change" event for example) and call saveRow on changing the state. It's important that the row will be not editable after the saving. If you do need to hold the row editable you will have to call editRow once more after successful saving of the row. You can call editRow inside of aftersavefunc callback of saveRow, but I recommend you to wrap the call of editRow inside of setTimeout to be sure that processing of previous saving is finished. It's the way which I would recommend you.

另一方面，如果你尝试结合enabled的复选框formatter: "checkbox"使用内联编辑，您将进行更复杂的处理。首先可以更改启用的复选框，这一点很重要before处理的onclick and onchange事件处理程序。 3个事件的顺序（改变复选框的状态，处理onclick和处理onchange) 在不同的网络浏览器中可能会有所不同。如果方法editRow正在执行它使用复选框格式化程序的取消格式化程序来获取当前的复选框的状态。基于国家的价值editRow将单元格的内容替换为另一个启用的复选框的内容。复选框的状态可能已经更改，但是editRow解释the changes state like the initial state的复选框。以同样的方式可以调用saveRow only after editRow。所以你不能只使用saveRow代替change的处理程序formatter: "checkbox", formatoptions: { disabled: false }，因为该行尚未处于编辑模式。

UPDATED:相应的实现（如果使用formatter: "checkbox", formatoptions: { disabled: false }) 可以是以下内容：

editurl: "SomeUrl",
beforeSelectRow: function (rowid, e) {
    var $self = $(this),
        $td = $(e.target).closest("tr.jqgrow>td"),
        p = $self.jqGrid("getGridParam"),
        savedRow = p.savedRow,
        cm = $td.length > 0 ? p.colModel[$td[0].cellIndex] : null,
        cmName = cm != null && cm.editable ? cm.name : "Quantity",
        isChecked;
    if (savedRow.length > 0 && savedRow[0].id !== rowid) {
        $self.jqGrid("restoreRow", savedRow[0].id);
    }
    if (cm != null && cm.name === "W3LabelSelected" && $(e.target).is(":checkbox")) {
        if (savedRow.length > 0) {
            // some row is editing now
            isChecked = $(e.target).is(":checked");
            if (savedRow[0].id === rowid) {
                $self.jqGrid("saveRow", rowid, {
                    extraparam: {
                        W3LabelSelected: isChecked ? "1" : "0", 
                    },
                    aftersavefunc: function (response) {
                        $self.jqGrid("editRow", rowid, {
                            keys: true,
                            focusField: cmName
                        });
                    }
                });
            }
        } else {
            $.ajax({
                type: "POST",
                url: "SomeUrl", // probably just p.editurl
                data: $self.jqGrid("getRowData", rowid)
            });
        }
    }
    if (rowid) {
        $self.jqGrid("editRow", rowid, {
            keys: true,
            focusField: cmName
        });
    }

    return true; // allow selection
}

请参阅 jsfiddle 演示http://jsfiddle.net/OlegKi/HJema/190/