JQgrid复选框onclick更新数据库答案

【问题标题】：JQgrid checkbox onclick update databaseJQgrid复选框onclick更新数据库
【发布时间】：2011-11-04 17:21:49
【问题描述】：

我的 JqGrid 中有一个复选框列，它是从 DB 加载的，因此在加载时选中或不选中。

我想要的是：如果用户选中或取消选中复选框，我想同时更新数据库。我不希望用户按回车键或任何东西。只需单击 1 次即可将操作发送到数据库

名称：'Aktiv'，索引：'Aktiv'，宽度：100，edittype：'checkbox'，对齐：'center'，格式化程序：“checkbox”，可编辑：true，formatoptions：{disabled：false}

【问题讨论】：

标签： jqgrid

【解决方案1】：

您可以在loadComplete 内设置click 事件处理程序：

loadComplete: function () {
    var iCol = getColumnIndexByName ($(this), 'Aktiv'), rows = this.rows, i,
        c = rows.length;

    for (i = 1; i < c; i += 1) {
        $(rows[i].cells[iCol]).click(function (e) {
            var id = $(e.target).closest('tr')[0].id,
                isChecked = $(e.target).is(':checked');
            alert('clicked on the checkbox in the row with id=' + id +
                '\nNow the checkbox is ' +
                (isChecked? 'checked': 'not checked'));
        });
    }
}

在哪里

var getColumnIndexByName = function(grid, columnName) {
    var cm = grid.jqGrid('getGridParam', 'colModel'), i, l;
    for (i = 1, l = cm.length; i < l; i += 1) {
        if (cm[i].name === columnName) {
            return i; // return the index
        }
    }
    return -1;
};

您应该使用jQuery.ajax 代替alert 向服务器发送有关更新复选框状态的信息。

你可以看到一个演示here。

【讨论】：

完美运行，现在我需要弄清楚如何将动作进一步发送到我的控制器，然后将其发送到数据库。哦，我想我现在明白了
太棒了.. 非常感谢。 +1 :)
@HardikMishra：不客气！目前我更喜欢不要对click 事件进行multipe 绑定。只需一个单击整个网格体就足够了。见the answer 或this one
@Oleg 如何让它只关注复选框？
@NewHistoricForm：对不起，我不明白你的意思。无论如何，答案是旧的。我从the answer 找到了更好的解决方案。

【解决方案2】：

loadComplete 中的一个小修正：function()。在演示中，您可以发现即使在选中复选框后，如果您在该单元格中的复选框外单击，该值也会从“true”更改为“false”。

为避免这种情况，只需通过执行以下操作将焦点完全放在复选框上。

for (i = 1; i < c; i += 1) {
    $(('input[type="checkbox"]'),rows[i].cells[iCol]).click(function (e) {
        var id = $(e.target).closest('tr')[0].id,
            isChecked = $(e.target).is(':checked');
        alert('clicked on the checkbox in the row with id=' + id +
              '\nNow the checkbox is ' +
              (isChecked? 'checked': 'not checked'));
    });
}

感谢您的回答 :-) (@Oleg) 帮了我很多..当然及时.. ;)

【讨论】：

这似乎不起作用。使用此代码时不会触发 click 事件。请指教。

【解决方案3】：

通过单击复选框来更改其他列的值

var weightedAvgPriceIndex = getColumnIndexByName($(this), 'WeightedAveragePrice'),
    rows = this.rows,
    i,
    c = rows.length;

for (i = 1; i < c; i += 1) {
    $(('input[type="checkbox"]'),rows[i].cells[iCol]).click(function (e) {
      var id = $(e.target).closest('tr')[0].id;
      isChecked = $(e.target).is(':checked');
      var x = $('#' + id + ' td:eq(' + weightedAvgPriceIndex + ')').text();
      $('#' + id + ' td:eq(' + weightedAvgPriceIndex + ')').text(Math.abs(x) + 10);
    });
}

【讨论】：