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

Question

I am creating a jqgrid with editable fields. I have 2 checkbox columns in jqgrid, one is coming from multiselect: true (to get unique rowId), other column is created inside column model.

I want to handle the onchange(checked/unchecked) event of the checkbox in my column model, independent of other checkbox column(multiselect:true). Any help appreciated. Below is the code snippet.

[{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);
            }

Answer 1

You can use beforeSelectRow callback. The demo demonstrate the approach. It uses the following code

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;
}

Answer 2

Define your own formatter function like this in your colmodel,

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

And your formatted checkbox like,

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

Hope this helps you.

Answer 3

I had an issue were not only I had more than 1 check box but also I had to update same column check box values based on the selection of the check box as well as modifying the same row columns.

In regards to the modification of the other checkboxes, when jqgrid modifies the data either by 'setCell' or 'setRowData' operations, it removes the click event. Also there is the problem that for checkboxes none of the edit functions are useful.

I manage to get bits from other people's solution and came to use the delegate jquery functions, that allows the binding of the click to be done each time an object that matches the selector is created. Also in this case only 1 checkbox of only 1 column could be checked at a time.

$(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);
    }
});

Do not mind the exact operations of the code, what is important is the operations that the binded function does. The CSS selector binds this function to all checkboxes whose name in my colmodel is stopArm.

I hope this answer is useful for some people. I found the delegate to be very useful! :)