Question

我不需要编辑，只能用单选按钮选择（甚至不多选）行。我找不到另一篇相关的帖子了。我已经有几列数据，但我无法弄清楚如何在每个组的第一列中放置一个单选按钮。

jqGrid呈现一个不可见的列 - 我想在用户点击按钮时发布的唯一ID。这对我来说应该足够了。因此，我还需要能够识别在我$.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
                }
            }
        };

修改

如果我将ID列呈现为可见，我想过使用jQuery手动更改HTML。但是，.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 date ISO8601Long（“Ymd H：i：s”）并使用{{ 1}}设置newformat的{{1}}。

Answer 2

当我查询模型中的数据时，我能够装备这个。当我创建我的网格然后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
},

Answer 3

我需要一个更简单的解决方案，所以我想出了这个方法，它使用内置的multiselect而不是在网格中添加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");
}

...

干杯，

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

修改

3 个答案: