c# - jqGrid - 如何根据*初始*列值设置自定义编辑选项？

Question

我将开源 jqGrid 插件与 EF4 和 ASP.NET Web 窗体一起使用。我需要根据数据库中的列值在可在线编辑的网格行中设置输入元素。例如，第一行可以包含一个 DDL，第二行可以包含一个复选框等。

我正在尝试使用 custom_element 来实现这一点和 custom_values ，像这样:

$("#grid1").jqGrid({
    url: 'Default.aspx/getGridData',
    datatype: 'json',
    ...
    colModel: [
    ...
    //contains the input type ('select', etc.)
    { name: 'InputType', hidden:true }, 
    ...
    //may contain a string of select options ('<option>Option1</option>'...)
    { 
      name: 'Input', 
      editable:true, 
      edittype:'custom', 
      editoptions:{
         custom_element: /* want cell value from InputType column here */ , 
         custom_value:   /* want cell value from Input column here */ 
      } 
     }, 
    ...
    ]
});

jqGrid docs说我可以调用自定义函数来设置 custom_element和 custom_values ，但我不知道如何捕获列值并将它们传递到我的自定义函数中。

用于设置 custom_values ，我确实注意到了Oleg's nice solution使用 list:参数，但这似乎涉及额外的 Ajax 调用。我想避免这种情况，因为我已经从对网格的初始 Ajax 调用中获得了所需的所有数据。

总而言之，在内联编辑模式下我需要执行以下操作:

1. 根据数据库值动态分配输入类型
2. 从数据库字符串动态分配输入值(用于 DDL 或复选框)

我也愿意跳过使用 custom_element和 custom_values , 但后来我仍然面临动态设置 edittype 的相同问题和 editoptions:{value:}参数。

关于如何做到这一点有什么想法吗？我应该采取其他方法吗？

更新:感谢您为帮助我所做的努力。根据请求，这是我的 JSON 响应的缩写示例:

{"d":[
{"Input":null,"InputType":"select"},
{"Input":"From downtown, proceed west on Interstate 70.", "InputType":"text"}
]}

有了这些数据，我想在一行中显示一个空的选择，在下一行显示一个填充的文本字段。两者都是可内联编辑的。

解决方案:我回到这个问题是为了找到一个不涉及使用custom_element的解决方案。和 custom_values .这是我更改 edittype 的解决方案(基于下面的 accepted answer)和 editoptions :

loadComplete: function () {
    var rowIds = $("#grid1").jqGrid('getDataIDs');

    $.each(rowIds, function (i, row) {
       var rowData = $("#grid1").getRowData(row);

       if (rowData.InputType == 'select') {
          $("#grid1").jqGrid('restoreRow', row);
                var cm = $("#grid1").jqGrid('getColProp', 'Input');
                cm.edittype = 'select';
                cm.editoptions = { value: "1:A; 2:B; 3:C" };
                $("#grid1").jqGrid('editRow', row);
                cm.edittype = 'text';
                cm.editoptions = null;
       }
   });
}

Nota Bene:对我来说重要的一件事是记住设置 editoptions返回null , 在调用 editrow 之后.此外，正如 Oleg 在评论中提到的那样，避免使用自定义元素使我能够毫不费力地实现日期选择器输入。这对我的应用程序很重要，所以我最终接受了 Oleg 的回答，但我仍然赞成 Walter 的回答。如果这是不好的形式，我真诚地道歉。我只是想奖励最适合我的解决方案。

Answer 1

如果您使用倾斜编辑，您可以直接在代码中的某处调用 editRow 方法。在 editRow 方法内部，将检查和使用 colModel 中与编辑相关的所有选项。因此，您可以动态更改任何选项，例如editable、edittype 或editoptions。 The answer显示了如何更改 editable 属性。您可以用同样的方式更改任何其他属性。

如果需要，您可以在 loadComplete 事件句柄中设置有关编辑类型和选项的信息。它有 data 参数代表从服务器发送的原始数据。因此，您可以使用其他信息扩展数据，并根据信息为任何列设置 editable、edittype 或 editoptions。