javascript jqgrid 中的多个复选框列。处理 onchange 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21045691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple checkbox columns in jqgrid. Handle onchange event
提问by Ann
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.
我正在创建一个带有可编辑字段的 jqgrid。我在 jqgrid 中有 2 个复选框列，一个来自 multiselect: true（以获得唯一的 rowId），另一列是在列模型中创建的。
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.
我想处理我的列模型中复选框的 onchange(checked/unchecked) 事件，独立于其他复选框列 (multiselect:true)。任何帮助表示赞赏。下面是代码片段。
[{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);
}
回答by Oleg
You can use beforeSelectRowcallback. The demodemonstrate the approach. It uses the following code
您可以使用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")) {
alert("checkbox is " +
($target.is(":checked")? "checked" : "unchecked") +
" in the column \"" + colModel[iCol].name +
"\" in the row with rowid=\"" + rowid + "\"");
}
return true;
}
回答by Vinoth Krishnan
Define your own formatter function like this in your colmodel,
在您的 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.
希望这对你有帮助。
回答by will824
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.
我遇到的问题不仅是我有 1 个以上的复选框，而且我必须根据复选框的选择以及修改相同的行列来更新相同列的复选框值。
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 functionsare useful.
关于其他复选框的修改，当jqgrid通过'setCell'或'setRowData'操作修改数据时，它会删除click事件。还有一个问题，对于复选框，没有任何编辑功能是有用的。
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.
我设法从其他人的解决方案中获取了一些信息，并开始使用委托 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);
}
});
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.
不要在意代码的确切操作，重要的是绑定函数所做的操作。CSS 选择器将此函数绑定到我的 colmodel 中名称为 stopArm 的所有复选框。
I hope this answer is useful for some people. I found the delegate to be very useful! :)
我希望这个答案对某些人有用。我发现委托非常有用！:)
