Question

我每行都有一个带有RadioButton的JqGrid。

  ...
 { 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 iee。中选择一个单选，单选按钮只能使用此功能选择：

  $(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的当前代码太复杂了。你可以用更简单的方式做你需要的事。

首先，我建议您使用name按钮的<radio>属性，该属性取决于网格的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，证明了这一点：

enter image description here

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

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

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

jqGrid单选按钮选择单行

3 个答案: