jqGrid单选按钮选择单行

Question

我的 JqGrid 每行都带有 RadioButton，就像这样。

  ...
 { name: 'select', label: 'select', width: 50, formatter:radio}

无线电格式化程序的功能：

function radio(value, options, rowObject){
   var radioHtml = '<input type="radio" value=' + value + ' name="radioid" />';
   return radioHtml;
}

当我尝试从 jqgrid 中选择单行时，即仅使用此功能选择的单选按钮：

  $(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);
       }
   });
 });

我正在获取网格中可用的所有行，而不是单个选定的行。

如果格式化程序是复选框，但不能用于收音机，则相同的功能效果很好。有什么遗漏吗？

更新：

   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 },
                ],

函数点击处理程序：

     $("#<%=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");
            }
        });

Answer 1

在我看来，您当前来自$("#<%=editButton.ClientID%>").click 的代码太复杂了。你可以用更简单的方式做你需要的事情。

首先，我建议您使用<radio> 按钮的name 属性，该属性取决于网格的ID（请参阅the answer）。可能是这样的

formatter: function (cellValue, option) {
    return '<input type="radio" name="radio_' + option.gid + '"  />';
}

您可以使用以下代码获取所选单选按钮的 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");
    }
});

参见the demo，它证明了这一点：

Answer 2

像这样添加列

{ 
    label:' ',
    name:' ',
    index:"id",
    width:20,
    search: false,
    formatter: function radio(cellValue, option,) {
        return '<input type="radio" value = '+cellValue+' name="radio"  />';
    } 
},

$('#buttonid').button().click(function () {
    var $selRadio = $('input[name=radio]:radio:checked'), $tr;

    if ($selRadio.length > 0) {
        $tr = $selRadio.closest('tr');

        if ($tr.length > 0) {              
            var grid = $("#jqGrid");
            var row = $tr.attr('id');
            var role_desc = grid.jqGrid('getCell', row, 'colname');
        }
    }
}

jqGrid 是网格 ID，colname 为您的列名提供了它的工作我.....

Answer 3

我需要一个更简单的解决方案，所以我想出了这种方法，它使用内置的多选而不是向网格中添加另一个列。

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");
},