jqGrid:格式化单元格值而不更改实际(基础)值?

时间:2011-12-20 11:52:36

标签: javascript jquery jqgrid jqgrid-formatter

是否可以显示其他内容,同时保留原始单元格值以进行编辑?

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

1 个答案:

答案 0 :(得分:1)

很难说没有看到一些代码,但您不需要使用自定义格式化程序,只需使用documentation中显示的formatter: 'select'即可。它特别声明“数据应包含键(”1“或”2“),但值(”一“或”二“)将显示在网格中。”

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

{ 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' 

}