Как я могу использовать переключатель, чтобы выбрать строку jqGrid?

Question

Мне не нужно редактировать, я только могу выбрать (даже не выбирать несколько) строку с переключателем.Я не смог найти другой соответствующий пост.У меня уже есть несколько столбцов данных, но я не могу понять, как разместить переключатель в первом столбце каждой группы.

jqGrid отображает с невидимым столбцом - уникальный идентификатор, который я бынравится отправлять сообщения, когда пользователь нажимает кнопку.Этого должно быть достаточно для меня, чтобы работать с.Итак, мне также нужно иметь возможность определить, какая строка была выбрана, когда я запускаю $.ajax({...});

На сайте не хватает документации, чтобы я мог это выяснить.Я искал какой-то API, но он существует только для PHP.Вот как я генерирую свою сетку в модели:

return new JQGrid
        {
            Columns = new List<JQGridColumn>()
            {
                new JQGridColumn
                {
                    DataField = "CallID", //this is the unique ID I need to postback
                    Visible = false
                },
                new JQGridColumn
                {
                    DataField = "Name",
                    HeaderText = "Full Name",
                    PrimaryKey = false,
                    Editable = false,
                    Width = 120
                },
                new JQGridColumn
                {
                    DataField = "CallStartTime",
                    HeaderText = "Call Placed On",
                    PrimaryKey = false,
                    Editable = false,
                    Width = 130
                }
            }
        };

Edit

Я думал об использовании jQuery для ручного изменения HTML, если я отображаю столбец ID видимым.Однако .jqGrid({options});, похоже, не обладает свойством для запуска кода после загрузки сетки.

Я мог бы загрузить сетку следующим образом:

$('#list').jqGrid({
            url: 'SearchTestGridDataRequested',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Select', 'Name', 'Call Placed On'],
            colModel: [
              { name: 'CallID', index: 'CallID', width: 50 },
              { name: 'ModelName', index: 'ModelName', width: 120 },
              { name: 'CallStartTime', index: 'CallStartTime', width: 130, align: 'right' }],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [10, 20, 30],
            viewrecords: true,
            caption: 'Calls'
        });

$('td[aria-describedby="list_CallID"]').each(function (i) {
    var id = $(this).attr('title');
    $(this).html('<input type="radio" value="' + id + '" name="selectedRow" />');
});

Но,задержка между сообщением ajax для запроса данных слишком велика, и я думаю, что код не выполняется.

Answer 1

Я бы порекомендовал вам сделать то же самое, но на стороне клиента . Вы можете использовать Custom Formatter для создания фрагмента HTML внутри вашей пользовательской функции форматирования:

{ name: 'CallID', index: 'CallID', width: 50,
  formatter:function (cellvalue, options, rowObject) {
      return '<input type="radio" name="selectedCall" value="' + cellvalue + '"' />"
  }
},

Серверная часть должна возвращать только данные без HTML.

Кроме того, я бы порекомендовал вам отослать в качестве значений для столбца CallStartTime данные, отформатированные как Дата ISO ISO8601Long ("Ymd H: i: s") и использовать newformat настройка formatoptions из formatter:'date'.

Answer 2

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

...

multiselect : true, //Must be true to allow for radio button selection
beforeSelectRow: function(rowid, e)
{
    // Allow only one selection
    $("#myGrid").jqGrid('resetSelection');
    return (true);
},
beforeRequest : function() {
    //Remove multi-select check box from grid header
    $('input[id=cb_myGrid]', 'div[id=jqgh_myGrid_cb]').remove();
},
loadComplete : function () {
    //Convert grid check boxes to radio buttons
    $('input[id^="jqg_myGrid_"]').attr("type", "radio");
}

...

Приветствия

Answer 3

Я смог настроить это, когда запросил данные в моей модели. Когда я создаю свои решетки для затем JSON'ify, я вручную вводю HTML-код для переключателя, устанавливая его атрибут значения в CallID в моей модели:

var gridrows = from call in calls
               select new
               {
                   i = call.CallID,
                   cell = new string[] { 
                       //call.CallID.ToString(),
                       "<input type=\"radio\" name=\"selectedCall\" value=\"" + call.CallID + "\" />",
                       call.Name, 
                       call.CallStartTime.ToString("MM/dd/yyyy hh:mm tt")
                   }
               };

Кажется, что jqGrid не требует имя объекта модели, совпадающее с атрибутом DataField при создании объекта JQGrid в модели - я думал, что я прочитал в документации, что это должно быть то же самое , но тогда вы можете изменить его, используя свойство HeaderText. Итак, новый объект JQGridColumn просто больше невидим, и я добавил значение HeaderText:

new JQGridColumn
{
    DataField = "CallID",
    HeaderText = "Select",
    Width = 50
},