Question

在我的jqGrid中，我有一个也可用于编辑的复选框，即用户可以单击复选框，该复选框的值将在数据库中更新。这工作正常。但是当我点击复选框并且我再次尝试点击它时，没有任何反应。该行未保存。从理论上讲，应该保存复选框的未选中值。但这不会发生。

我曾尝试提及Oleg的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

编辑：在Oleg的回答之后，这就是我到目前为止所做的：

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上某些复选框的状态，然后更改页面并返回第一页。您将看到复选框的状态对应于lates更改。

现在让我们尝试在选择网格行时开始内联编辑（启动editRow）。首先，内联编辑使用unformatter从行（可编辑列）中获取值，将旧值保存在内部savedRow参数中，然后在可编辑单元格内创建新的编辑控件旧内容的地方。如果使用formatter: "checkbox"的标准禁用复选框，则一切都相对简单。 jqGrid只是在禁用的复选框位置创建启用的复选框。用户可以更改复选框的状态或任何其他可编辑列的内容，并使用 Enter 保存更改。之后，所选行将被保存，并且不会更具可编辑性。您还可以监视复选框状态的更改（例如，使用editoptions.dataEvents使用"change"事件），并在更改状态时调用saveRow。保存后，该行不可编辑，这一点非常重要。如果您确实需要保持行可编辑，则必须在成功保存行后再次致电editRow。您可以在editRow的{{1}}回调中拨打aftersavefunc，但我建议您在saveRow内打包editRow，以确保处理之前的保存已完成。这是我推荐你的方式。

另一方面，如果您尝试将setTimeout的已启用复选框与内联编辑相结合，那么您将进行更复杂的处理。重要的是，在formatter: "checkbox"和onclick事件处理程序的处理之前，首先可以更改已启用的复选框。在不同的Web浏览器中，3个事件的顺序（更改复选框的状态，onchange的处理和onclick的处理）可能会有所不同。如果方法onchange正在执行，则它使用checkbox格式化程序的格式化来获取复选框的当前状态。基于状态editRow的值，将单元格的内容替换为另一个启用的复选框的内容。可能是复选框的状态已更改，但editRow会解释editRow，例如复选框的the changes state。以同样的方式，人们可以在 the initial state之后仅调用saveRow 。因此，您不能在editRow的{{1}}处理程序中使用saveRow，因为该行尚未处于编辑模式。

更新：相应的实施（如果使用change）可能如下：

formatter: "checkbox", formatoptions: { disabled: false }

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

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

1 个答案: