如何使用单选按钮选择jqGrid行？

Question

我不需要编辑，只能使用单选按钮选择（甚至不能多选）该行。 我还找不到其他相关职位。 我已经有几列数据，但是我不知道如何在每个组的第一列中放置一个单选按钮。

jqGrid用不可见的列进行渲染-当用户单击按钮时，我想发布一个唯一的ID。 这对于我来说应该足够了。 因此，我还需要能够在启动$.ajax({...});时确定选择了哪一行$.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
                }
            }
        };

编辑

我考虑过使用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

我建议您在客户端执行相同的操作。 您可以使用“ 自定义格式化程序”在自定义格式化程序功能内构造HTML片段：

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

服务器部分应仅返回不带任何HTML的数据。

此外，我建议您将格式化为ISO日期 ISO8601Long （“ Ymd H：i：s”）的数据作为CallStartTime列的值发送回来，并使用formatter:'date'的formatoptions的newformat设置。

Answer 2

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

...

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，将其value属性设置为模型中的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对象时，jqGrid似乎不需要将模型对象命名为与DataField属性相同的名称-我以为我在文档中读到它必须是相同的，但是您可以使用HeaderText属性。 因此，新的JQGridColumn对象不再不可见，我添加了HeaderText值：

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