javascript - jqGrid：在不更改实际（基础）值的情况下格式化单元格值？

Question

是否可以显示其他内容，但保留原始单元格值以进行编辑？

我的 jqGrid 中的一列是“枚举”数据。对于编辑，我提供了 edittype: select + editoptions: enum-key:label set，这样可以正确显示选择编辑器。但是，我想为常规视图显示标签而不是枚举键，而不仅仅是编辑。我知道我可以使用自定义单元格格式化程序，但这会导致实际值发生变化，然后我必须在编辑行之前再次查找键标签对......

Answer 1

没有看到一些代码很难说，但是您不需要使用自定义格式化程序，只需按照文档formatter: 'select'中所示使用即可。它特别指出“数据应包含键（“1”或“2”），但值（“一”或“二”）将显示在网格中”。

如果您需要对输出进行更多控制，另一种选择是使用buildSelecteditoptions 选项。例如，这是我在代码中的一个选择，还有其他示例。这个想法当然是您可以返回任何数据，然后根据需要对其进行操作以构建选择。然后，数据事件更改功能确保为输入字段设置了正确的值。

{ name: 'Id', index: 'Id', editable: true, hidden: true,  
     editoptions: { defaultValue: row_id,
                    dataUrl: "DataService.asmx/GetList",
                    buildSelect: function (data) {
                                 var s = '<select>';
                                 if (data && data.d) {
                                    //data is nested, so we need a few steps to get to the actual data
                                    var list = data.d;
                                    var opts = JSON.parse(list);
                                    var subList = opts.List;
                                    //loop through the data to build the options list
                                    for (var i = 0, l = subList.length; i < l; i++) 
                                        {   var ri = subList[i]; 
                                            s += '<option value=' + ri.Id + '>' + ri.Name + '</option>';
                                        }
                                  }
                                  else {
                                     s+= "<option value=0>No data to display</option>";
                                  }
                                  return s + "</select>"; 
                            } ,
                      dataEvents: [
                              { type: 'change',
                                fn: function (e) {
                                        $('input#Id').val(this.value);
                                }
                              }
                              ]

                     },
       editrules:  {edithidden: true},
       edittype: 'select' 

}