jQuery jqGrid单选按钮选择单行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8552303/
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 Radio Button select single row
提问by Suave Nti
I have JqGrid with RadioButton per each row like this.
我像这样每行都有带有单选按钮的 JqGrid。
...
{ name: 'select', label: 'select', width: 50, formatter:radio}
and function for radio formatter:
和无线电格式器的功能：
function radio(value, options, rowObject){
var radioHtml = '<input type="radio" value=' + value + ' name="radioid" />';
return radioHtml;
}
when I try to select a singlerow from the jqgrid i.ee., radio button which is only selected using this function:
当我尝试从 jqgrid i.ee. 中选择单行时，仅使用此功能选择的单选按钮：
$(function () {
$("#<%=editButton.ClientID%>").click(function () {
var ids = $("#table").jqGrid('getCol', 'select', true);
alert(ids)
for (var i = 0; i < ids.length; i++) {
//alert(ids[i].id)
if (ids[i].id != '') {
var idx = $("#table").jqGrid('getCell', ids[i].id, 'select');
}
// alert(idx);
}
});
});
Am getting all the rows available in the grid rather than single selected row.
我正在获取网格中可用的所有行，而不是单个选定的行。
The same function works well if formatter is checkbox but not for radio. Is there something missing?
如果格式化程序是复选框而不是收音机，则相同的功能运行良好。有什么遗漏吗？
UPDATE:
更新：
colModel: [
{ name: 'select', label: 'select', width: 50,
formatter: function radio(cellValue, option) {
return '<input type="radio" name="radio_' + option.gid + '" />';
}
},
{ name: 'code', label: 'Branch Code', width: 250 },
{ name: 'name', label: 'Branch Name', width: 250 },
{ name: 'status', label: 'Group Status', width: 250 },
],
Function Click Handler:
功能点击处理程序：
$("#<%=editButton.ClientID%>").click(function () {
alert('M');
var $selRadio = $('input[name=radio_' + $table[0].id + ']:checked'), $tr;
alert('I');
if ($selRadio.length > 0) {
$tr = $selRadio.closest('tr');
if ($tr.length > 0) {
alert("The id of selected radio button is " + $tr.attr('id'));
}
} else {
alert("The radio button is not selected");
}
});
回答by Oleg
It seems to me that your current code from $("#<%=editButton.ClientID%>").clickis too complex. You can do what you need in more simple way.
在我看来，您当前的代码来自$("#<%=editButton.ClientID%>").click太复杂了。你可以用更简单的方式做你需要的。
First of all I recommend you to use the nameattribute of the <radio>button which is depend on the id of the grid (see the answer). It could be like the following
首先，我建议您使用取决于网格 idname的<radio>按钮属性（请参阅答案）。它可能如下所示
formatter: function (cellValue, option) {
return '<input type="radio" name="radio_' + option.gid + '" />';
}
You can get the id of selected radio button with the following code
您可以使用以下代码获取所选单选按钮的 id
$("#<%=editButton.ClientID%>").button().click(function () {
var $selRadio = $('input[name=radio_' + $grid[0].id + ']:checked'), $tr;
if ($selRadio.length > 0) {
$tr = $selRadio.closest('tr');
if ($tr.length > 0) {
alert("The id of selected radio button is " + $tr.attr('id'));
}
} else {
alert("The radio button is not selected");
}
});
See the demowhich demonstrate this:
回答by Larissa Hahn
I needed a simpler solution so I came up with this way which uses the built-in multiselect rather than adding yet another col to the grid.
我需要一个更简单的解决方案，所以我想出了这种使用内置多选而不是向网格添加另一个列的方法。
var gridSelector = $("#myGrid");
multiselect : true,
beforeSelectRow: function(rowid, e)
{
$(gridSelector).jqGrid('resetSelection');
return (true);
},
beforeRequest : function() {
$('input[id=cb_myGrid]', 'div[id=jqgh_myGrid_cb]').remove();
},
loadComplete : function () {
$('input[id^="jqg_myGrid_"]').attr("type", "radio");
},
