jQuery 如何在复选框单击时选择 jqGrid 行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6466750/
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
How to select jqGrid row on checkbox click?
提问by Oleg
Below is my code for jqGrid, i'd like to select row or highlight the current row, when i checka particular checkbox inside jqgrid row. right now onSelectRowI am making the checkbox get checked.
下面是我的 jqGrid 代码，当我check在 jqgrid 行内有一个特定的复选框时，我想选择行或突出显示当前行。现在onSelectRow我正在检查复选框。
var xmlDoc = $.parseXML(xml);
$('#configDiv').empty();
$('<div width="100%">')
.attr('id','configDetailsGrid')
.html('<table id="list1" width="100%"></table>'+
'<div id="gridpager"></div>'+
'</div>')
.appendTo('#configDiv');
var grid = jQuery("#list1");
grid.jqGrid({
datastr : xml,
datatype: 'xmlstring',
colNames:['cfgId','','Name', 'Host', 'Description','Product', 'Type', 'Last Updated Time','Last Updated By',''],
colModel:[
{name:'cfgId',index:'cfgId', width:90, align:"right", hidden:true},
{name:'',index:'', width:15, align:"right",edittype:'checkbox',formatter: "checkbox",editoptions: { value:"True:False"},editable:true,formatoptions: {disabled : false}},
{name:'cfgName',index:'cfgName', width:90, align:"right"},
{name:'hostname',index:'hostname', width:90, align:"right"},
{name:'cfgDesc',index:'cfgDesc', width:90, align:"right"},
{name:'productId',index:'productId', width:60, align:"right"},
{name:'cfgType',index:'cfgType', width:60, align:"right"},
{name:'updateDate',index:'updateDate',sorttype:'Date', width:120, align:"right"},
{name:'emailAddress',index:'emailAddress', width:120, align:"right"},
{name:'absolutePath',index:'absolutePath', width:90, align:"right", hidden:true},
],
pager : '#gridpager',
rowNum:10,
scrollOffset:0,
height: 'auto',
autowidth:true,
viewrecords: true,
gridview: true,
xmlReader: {
root : "list",
row: "com\.abc\.db\.ConfigInfo",
userdata: "userdata",
repeatitems: false
},
onSelectRow: function(id,status){
var rowData = jQuery(this).getRowData(id);
configid = rowData['cfgId'];
configname=rowData['cfgName'];
configdesc=rowData['cfgDesc'];
configenv=rowData['cfgType'];
if(status==true)
{
}
rowChecked=1;
currentrow=id;
},
onCellSelect: function(rowid, index, contents, event) {
if(index==2)
{
$(xmlDoc).find('list com\.abc\.db\.ConfigInfo').each(function()
{
//alert($(this).find('cfgId').text()+" "+configid);
if($(this).find('cfgId').text()==configid)
{
configname=$(this).find('cfgName').text();
configdesc=$(this).find('cfgDesc').text();
configenv=$(this).find('cfgType').text();
filename=$(this).find('fileName').text();
updatedate=$(this).find('updateDate').text();
absolutepath=$(this).find('absolutePath').text();
productname=productMap[$(this).find('productId').text()];
}
});
}
}
});
grid.jqGrid('navGrid','#gridpager',{edit:false,add:false,del:false});
So how would I select current row on checkbox selected?
那么如何在选中的复选框上选择当前行？
回答by WooDzu
Put this at the and of your JS code in order to run selection when clicking a checkbox
将其放在 JS 代码中，以便在单击复选框时运行选择
$("#list1").find('input[type=checkbox]').each(function() {
$(this).change( function(){
var colid = $(this).parents('tr:last').attr('id');
if( $(this).is(':checked')) {
$("#list1").jqGrid('setSelection', colid );
$(this).prop('checked',true);
}
return true;
});
});
example UPDATED AGAIN: http://jsfiddle.net/vCWNP/
再次更新示例：http: //jsfiddle.net/vCWNP/
edit:this also should be done every time a new row is added. let me know if something else is to be fixed ;]
编辑：每次添加新行时也应该这样做。如果还有其他问题要修复，请告诉我；]
回答by Oleg
It seems to me, that you could solve your problem very easy. What you try to do is already implemented in the jqGrid. If you removethe column name:'',index:''which has empty name, which is NOT PERMITTEDand include an additional jqGrid parameter multiselect:trueall will work like you as need.
在我看来，你可以很容易地解决你的问题。您尝试做的事情已经在 jqGrid 中实现了。如果您删除name:'',index:''具有emptyname的列，这是不允许的，并包含一个额外的 jqGrid 参数，multiselect:true所有这些都将根据您的需要工作。
回答by Timeternity
One simple way to do that:
一种简单的方法来做到这一点：
jQuery(".jqgrow td input").each(function () {
jQuery(this).click(function () {
$("#grid").jqGrid('setSelection', $(this).parents('tr').attr('id'));
});
});
回答by Vivek
on your onSelectRowfunction add:
在您的onSelectRow函数上添加：
var flag = jQuery(this).find('#'+id+' input[type=checkbox]').prop('checked');
if(flag){
jQuery(this).css('background-color', 'red' )// row will be in red if checkbox is selected, you have to find out the current row here
}
