jqGrid select 列表的 ID 值

Question

我使用的是 jQrid 版本 3.8.1，我有一个显示汽车信息的网格。 jQgrid 应该设置为每行显示一辆车，其中一列是一个 multi-select 列表，显示汽车配置的座位类型。一辆车可以有多种座位类型。

当用户编辑汽车行时，它会进行 ajax 查询以获取系统中所有可用的座位类型，并将它们粘贴到 multi-select 列表中。除了填充列表之外，它还需要 select 已经为该车选择的选项。

Installed Seats 列中的值不是简单的字符串。它们同时具有 ID 和字符串值。所以 "Wire mesh" 的 ID 可能是 2883，"Composite" 的值可能是 29991。它们只是唯一的数值（基本上是它们存储在 table 中的主键）。

在 multi-select 列表中填充了所有合适的 Seat 值后，我需要 select 汽车当前安装的那些（在上图中它是 "Steel" 和 "Wire frame")。我需要根据为该车存储的座位 ID 执行此操作。但是，我不知道这些价值从何而来。网格只存储座位的名称，不存储 ID。希望有办法让它同时存储两者。

列模型如下所示：

colModel: [
    { name: 'Year', index: 'Year', editable: true, edittype: "select", editoptions: { multiple: true } },
    { name: 'Make', index: 'Make', editable: true, edittype: "select", editoptions: { multiple: true } },
    { name: 'Body', index: 'Body', editable: true, edittype: "select", editoptions: { multiple: true } },
    { name: 'Seats', index: 'Seats', editable: true, edittype: "select", editoptions: { multiple: true }, cellattr='is-seat-list="1"' }
]

请注意 'Seats' 模型有一个名为 is-seat-list 的单元格属性。我正在使用它在 'editRow' 函数内的行中找到 select 框。

onSelectRow 处理程序如下所示：

onSelectRow: function (index) {
    var curValues = $('#cargrid').getRowData(index);

    jQuery('#cargrid').jqGrid('editRow', index, true, function(rowId) {

        //when the user edits the row, query for all the seat types and fill in the list
        jQuery.ajax({
            url: '/getalltheseats',
            complete: function (allSeats, stat) {
                var list = $('#cargrid').find('tr[id="' + rowId + '"] td[is-seat-list="1"] select');
                var $list = $(list);

                //add the all seat types to the list, checking the ones that this car currently has selected
                _.each(allSeats, function(seat) {
                    var selected = '';
                    if(curValues['Seats'].indexOf(seat.ID) !== -1) //<-- what do I do here??
                        selected = 'selected';

                    $list.append($('<option ' + selected + '></option>').attr('value', seat.ID).text(seat.Name));
                });
            });
        });
    });
},

重要的是

if(curValues['Seats'].indexOf(seat.ID) !== -1)

我有该行的值，但它只包含座位名称，不包含 ID。从 ajax 调用返回的数据包含每个座位名称和 ID，但 <option> 元素不包含 ID 值，所以我不知道列表中的哪些 select。

所以问题是，让 jqGrid 存储座位名称和 ID 的最佳方法是什么，这样当我动态创建列表时，我可以检查 <option>s 以查找已选择的座位为了那辆车。

注：
由于各种原因，jqGrid 的标准 dataUrl 和 buildSelect 功能是，这就是我以这种方式即时构建列表的原因。

Answer 1

首先，您需要额外添加 formatter: "select" 并在填充网格期间在 Seats 列中填充 ID 值。 formatter: "select" 将解码 ID，并将相应的名称值显示给用户。

如果您要使用更新版本的 jqGrid，您可以使用为此目的创建的 beforeProcessing 回调。它允许在服务器响应中包含所有不同的 ID/Name 对 以填充网格 。它允许您直接在主服务器响应中填写 formatter: "select" 所需的信息。在创建网格之前，您不需要加载信息。

如果你使用复古版本的jqGrid（3.8.1）那么我希望你仍然可以使用下面的技巧。您可以将服务器响应的 userdata 部分定义为函数。服务器响应的外部元素root、page、total、records和userdata将在之前被处理处理主要部分和所有项目。它允许您在 formatter: "select".
处理之前修改 editoptions.value
例如来自服务器的响应可以看起来像

{ "page": 1, "total": 20, "records": 400, "userdata": { "seats": "29991:Composite;42713:Nappa leather;6421:Steel;2883:Wire mesh" }, "rows": [ { "year": 2007, "model": "Toyota/Camry", "body": "Sedan", "seats": "29991,6421" }, { "year": 2057, "model": "BMW/Series 4", "body": "Sedan", "seats": "6421,2883" } ] }

在 jsonReader 中你可以定义 userdata 设置 userdata.seats 为 value of editoptions。例如，您可以使用 setColProp 方法来执行此操作。

通过这种方式，您将能够实现您的所有要求。

jqGrid select 列表的 ID 值

ID values for jqGrid select lists

jqgrid