javascript - Multiple checkbox columns in jqgrid. Handle onchange event - Stack Overflow

admin管理员组

文章数量:1289542

I am creating a jqgrid with editable fields. I have 2 checkbox columns in jqgrid, one is ing 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);
            }

I am creating a jqgrid with editable fields. I have 2 checkbox columns in jqgrid, one is ing 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);
            }

• javascript
• jquery
• checkbox
• jqgrid

Share Improve this question Follow asked Jan 10, 2014 at 13:33 AnnAnn 4511 gold badge33 silver badges1414 bronze badges 1

• Instead of using formatter: 'checkbox' in your colmodel define your own formatter function for checkbox. So you can include your onchange function. – Vinoth Krishnan Commented Jan 10, 2014 at 14:30

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

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.

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! :)

本文标签： javascriptMultiple checkbox columns in jqgrid Handle onchange eventStack Overflow