javascript - jqGrid - 复选框编辑无法编辑选定的行

Question

在我的 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

编辑:在奥列格的回答之后，这就是我到目前为止所拥有的:

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仅当我选中该复选框然后再次单击它以第一次取消选中它时才被调用，之后再也不选中它。默认情况下，可以根据从服务器发送的数据选中或取消选中该复选框。



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

更新:根据@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

Answer 1

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

现在让我们尝试在选择网格的行时开始内联编辑(开始 editRow )。首先内联编辑使用​​ unformatter 从行(可编辑列)中获取值，将旧值保存在内部 savedRow参数，然后是 创建新的编辑控件在旧内容位置的可编辑单元格内。如果使用 formatter: "checkbox" 的标准禁用复选框，一切都相对容易。 . jqGrid 只是在禁用复选框的位置创建启用复选框。用户可以更改复选框的状态或任何其他可编辑列的内容，并使用 Enter 保存更改。之后，选定的行将被保存并且不再可编辑。您可以额外监控复选框状态的变化(例如通过使用 editoptions.dataEvents 和 "change" 事件)并调用 saveRow关于改变状态。保存后该行将不可编辑，这一点很重要。如果您确实需要保持可编辑的行，则必须调用 editRow在 之后再一次保存成功行的。您可以调用editRow aftersavefunc 内部saveRow的回调, 但我建议您结束 editRow 的调用setTimeout 内部以确保完成先前保存的处理。这是我向您推荐的方式。

另一方面，如果您尝试合并 启用 formatter: "checkbox" 的复选框使用内联编辑，您将进行更复杂的处理。重要的是可以首先更改启用的复选框之前 处理onclick和 onchange事件处理程序。 3 个事件的顺序(更改复选框的状态、处理 onclick 和处理 onchange )在不同的 Web 浏览器中可能不同。如果方法editRow正在执行它使用 checkbox-formatter 的 unformatter 来获取复选框的当前状态。基于状态的值 editRow用另一个启用的复选框将单元格的内容替换为另一个内容。可能是复选框的状态已经改变，但是editRow翻译the changes state喜欢 the initial state的复选框。同理可以调用saveRow仅限 之后 editRow .所以你不能只使用saveRow change 内部formatter: "checkbox", formatoptions: { disabled: false } 的处理程序，因为该行尚未处于编辑模式。

更新:相应的实现(在使用 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/