如何使用单选按钮选择jqGrid行? [英] How can I use a radio button to select a jqGrid row?

问题描述

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

I don't need to edit, only be able to select (not even multiselect) the row with a radio button. I haven't been able to find another relevant post. I already have several columns of data, but I can't figure out how to place a radio button in the first column of each group.

jqGrid用不可见的列进行渲染-当用户单击按钮时，我想发布一个唯一的ID.这对于我来说应该足够了.因此，我还需要能够确定在触发$.ajax({...});

The jqGrid renders with an invisible column--a unique ID I'd like to post when the user clicks a button. This should be enough for me to work with. So, I also need to be able to identify which row was selected when I fire $.ajax({...});

网站上似乎没有足够的文档让我知道.我一直在寻找某种API，但仅适用于PHP.这是我在模型中生成网格的方法:

There doesn't seem to be enough documentation on the website for me to figure it out. I have been looking for some kind of API, but it only exists for PHP. Here's how I generate my grid in the model:

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});似乎没有用于加载网格后启动代码的属性.

Edit

I thought about using jQuery to manually change the HTML if I render the ID column visible. However, the .jqGrid({options}); doesn't seem to have a property for code to launch after a grid is loaded.

我可以这样加载网格:

$('#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发布请求数据之间的延迟太长，我猜代码没有执行.

But, the delay between the ajax post to request the data is too long and I guess the code doesn't execute.

推荐答案

当我查询模型中的数据时，便能够进行装配.创建网格行以进行JSON'ify时，我手动输入了单选按钮的HTML，将其value属性设置为模型中的CallID:

I was able to rig this when I queried the data in my model. When I create my gridrows to then JSON'ify, I manually enter the HTML for the radio button setting its value attribute to the CallID in my model:

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值:

It seems jqGrid does not require the model object to be named the same as the DataField attribute when creating the JQGrid object in the model--I thought I read in the documentation it had to be the same, but then you could modify it using the HeaderText property. So, the new JQGridColumn object just isn't invisible any more and I added a HeaderText value:

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

这篇关于如何使用单选按钮选择jqGrid行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！