jqgrid 中的多个复选框列。处理 onchange 事件答案

【问题标题】：Multiple checkbox columns in jqgrid. Handle onchange eventjqgrid 中的多个复选框列。处理 onchange 事件
【发布时间】：2014-01-10 13:33:30
【问题描述】：

我正在创建一个带有可编辑字段的 jqgrid。我在 jqgrid 中有 2 个复选框列，一个来自 multiselect: true （以获取唯一的 rowId），另一个列是在列模型中创建的。

我想在我的列模型中处理复选框的 onchange(checked/unchecked) 事件，独立于其他复选框列 (multiselect:true)。任何帮助表示赞赏。下面是代码sn-p。

[{name : "userRole", label: 'OV', width: 40, editable:true, edittype:'checkbox',formatter: 'checkbox', editoptions: {value:"True:False"},
 formatoptions: { disabled: false},frozen:true}]
multiselect: true,
 onSelectRow: function(rowid){ 
             jQuery(this).editRow(rowid, true);
            }

【问题讨论】：

不要在你的 colmodel 中使用formatter: 'checkbox'，而是为复选框定义你自己的formatter 函数。所以你可以包含你的onchange 函数。

标签： javascript jquery checkbox jqgrid

【解决方案1】：

您可以使用beforeSelectRow 回调。 The demo 演示该方法。它使用以下代码

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")) {
        alert("checkbox is " +
              ($target.is(":checked")? "checked" : "unchecked") +
              " in the column \"" + colModel[iCol].name +
              "\" in the row with rowid=\"" + rowid + "\"");
    }
    return true;
}

【讨论】：

【解决方案2】：

在你的 colmodel 中定义你自己的格式化函数，

[{name : "userRole", label: 'OV', width: 40, 
 editable:true, edittype:'checkbox',formatter: checkboxFormatter, 
  editoptions: {value:"True:False"},

还有你的格式化复选框，

function checkboxFormatter(cellvalue, options, rowObject) {
return "<input type='checkbox' name='checkboxIsCC' 
              onchange='your_own_function();'>";
}

希望对你有所帮助。

【讨论】：

【解决方案3】：

我遇到的问题不仅是我有超过 1 个复选框，而且我必须根据复选框的选择更新相同列的复选框值以及修改相同的行列。

关于其他复选框的修改，当jqgrid通过'setCell'或'setRowData'操作修改数据时，它会移除点击事件。还有一个问题是，对于复选框，edit functions 都没有用。

我设法从其他人的解决方案中获取一些信息，并开始使用委托 jquery 函数，它允许每次创建与选择器匹配的对象时完成单击的绑定。同样在这种情况下，一次只能检查 1 列的 1 个复选框。

$(document).delegate("#alarmDownloadListView td[aria-describedby*='stopArm'] input", 'click', function () { 
// Function that modifies all the other checkboxes of the same column 
    deselectOthersStopArmAlarms(this, j);
    // Set the Pre and Pos Alarm values to default
    var fileIndex = $(this).closest('tr').index();
// Modification of the same row cells 
    if($(this).is(':checked')){
        alarmsGrid.jqGrid('setCell',fileIndex,'preAlarm', defaultPrePosStopArmAlarmValue);
    }else{
        alarmsGrid.jqGrid('setCell',fileIndex,'preAlarm', null);
    }
});

不要介意代码的确切操作，重要的是绑定函数所做的操作。 CSS 选择器将此函数绑定到我的 colmodel 中名称为 stopArm 的所有复选框。

我希望这个答案对某些人有用。我发现委托非常有用！ :)

【讨论】：