Javascript jqgrid 复选框更改事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6091072/
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
jqgrid checkbox change event
提问by London
I have true/false values in my database. I want to update them with checkbox in jqgrid. Once the value is set to true, it will remain true and should not change. Please take a look at my column model :
我的数据库中有真/假值。我想用 jqgrid 中的复选框更新它们。一旦该值设置为 true，它将保持为 true，不应更改。请看一下我的列模型：
{
name : 'available',
width : 12,
resizable: true,
editable: true,
align: 'center',
edittype:'checkbox',
formatter: "checkbox", formatoptions: {disabled : false},
classes:'check',
editrules:{required:false}, editoptions:{size:39,value:"True:False"}
}
I'm trying to capture the event when checkbox is checked, currently they are all unchecked, so far I've tried:
我试图在选中复选框时捕获事件，目前它们都未选中，到目前为止我已经尝试过：
jq(".check input").each(function(){
jq(this).click(function(){
aler("works");
});
});
jq("input[type='checkbox']").change(function(){
alert("works");
});
jq(":checkbox").parent().click(function(evt) {
if (evt.target.type !== 'checkbox') {
var $checkbox = jq(":checkbox", this);
$checkbox.attr('checked', !$checkbox.attr('checked'));
$checkbox.change();
alert("");
}
});
None of these work, I'm stuck don't know what else to try.
这些都不起作用，我被卡住了不知道还能尝试什么。
When inspect checkbox code with firebug it looks like this :
当用 firebug 检查复选框代码时，它看起来像这样：
<input type="checkbox" offval="no" value="false">
采纳答案by Oleg
The usage of the custom formatter is one of the possibilities. One can also use unobtrusive style of onclickbinding
自定义格式化程序的使用是可能性之一。也可以使用不显眼的onclick装订方式
First one defines
第一个定义
var grid = $("#list"),
getColumnIndexByName = function(columnName) {
var cm = grid.jqGrid('getGridParam','colModel'),i=0,l=cm.length;
for (; i<l; i++) {
if (cm[i].name===columnName) {
return i; // return the index
}
}
return -1;
},
disableIfChecked = function(elem){
if ($(elem).is(':checked')) {
$(elem).attr('disabled',true);
}
};
Then one can use the in the loadCompletethe code like
然后可以loadComplete在代码中使用
loadComplete: function() {
var i=getColumnIndexByName('closed');
// nth-child need 1-based index so we use (i+1) below
$("tbody > tr.jqgrow > td:nth-child("+(i+1)+") > input",
this).click(function(e) {
disableIfChecked(this);
}).each(function(e) {
disableIfChecked(this);
});
}
See the corresponding demo here.
在此处查看相应的演示。
回答by hyperslug
You can create a custom formatter. In your grid,
您可以创建自定义格式化程序。在你的网格中，
formatter: cboxFormatter,
Then define the function,
然后定义函数，
function cboxFormatter(cellvalue, options, rowObject)
{
return '<input type="checkbox"' + (cellvalue ? ' checked="checked"' : '') +
'onclick="alert(' + options.rowId + ')"/>';
}
You can use onclickto perform your task or call a function.
您可以使用它onclick来执行任务或调用函数。
回答by Mike
This worked for me:
这对我有用：
// Listen for Click Events on the 'Process' check box column
$(document).on("click", "td[aria-describedby='grdOrders_Process']", function (e) {
var checked = $(e.target).is(":checked")
var rowId = $(e.target).closest("tr").attr("id")
rowData = jQuery("#grdOrders").getRowData(rowId);
alert("Checked: " + checked)
alert("OrderNo: " + rowData.OrderNo);
alert("Name: " + rowData.Name);
});
