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

【问题标题】：How can I use a radio button to select a jqGrid row?如何使用单选按钮选择 jqGrid 行？
【发布时间】：2023-03-07 02:16:01
【问题描述】：

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

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 post请求数据之间的延迟太长了，我猜代码没有执行。

【问题讨论】：

标签： c# jqgrid

【解决方案1】：

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

【讨论】：

【解决方案2】：

我建议您在客户端方面也这样做。您可以使用Custom Formatter 在自定义格式化程序函数中构造 HTML 片段：

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

服务器部分应该只返回没有任何 HTML 的数据。

此外，我建议您将格式为ISO date ISO8601Long ("Ymd H:i:s") 的数据作为CallStartTime 列的值发回，并使用@987654327 的newformat 设置@ 的formatter:'date'。

【讨论】：

我必须对其进行测试——我认为可能有一种方法可以使用自定义格式化程序，但对我来说并不明显。
@David：我只尝试在客户端生成与服务器端相同的单选按钮。我不太明白带有一个单选按钮的单选按钮（如'<input type="radio" value="' + id + '" name="selectedRow" />'）如何为您提供帮助。它看起来像一个复选框。如果您的问题尚未解决，您能否发布一张图片的 HTML 代码片段，显示您希望在表格单元格中包含的内容。
单选按钮可以帮助我在下一次回发的上下文中选择行。在下一次回发中，我收到一个名为 selectedCallXXX 的元素，其中 XXX 是我需要处理的唯一 ID。
@David：你为什么不直接使用multiselect:true呢？

【解决方案3】：

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

...

干杯，

【讨论】：