Переключатель 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 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);
       }
   });
 });

Получаю все доступные строки в сетке, а не одну выбранную строку.

Та же функция работает хорошо, если форматтер установлен, но не для радио. Чего-то не хватает?

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

Функция Click Click Обработчик:

     $("#<%=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>, который зависит от идентификатора сетки (см. ответ ). Это может быть похоже на следующее

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

Вы можете получить идентификатор выбранной радиокнопки со следующим кодом

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

См. демо , демонстрирующее это:

Answer 2

Мне нужно было более простое решение, поэтому я придумал этот способ, который использует встроенный множественный выбор вместо добавления еще одного столбца в сетку.

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