javascript - 带有内联编辑的光滑网格选择框，在选择值后显示文本

Question

我正在尝试用光滑的网格来表示数据。但就我而言，大多数数据都以选择框的形式出现。我检查 SelectCellEditor Option 上的选项从这里。但是对于保存时的动态填充值，如果我们可以使用值来使用发布数据并在网格中显示文本，将会很有帮助。为此我修改了我的数据如下

function SelectCellEditor(args) {
    var $select;
    var defaultValue;
    var scope = this;

    this.init = function() {

        option_str = "";
        args.column.options.forEach(function(data)
        {
          option_str += "<OPTION value='"+data.key+"'>"+data.value+"</OPTION>";
        });
        $select = $("<SELECT tabIndex='0' class='editor-select'>"+ option_str +"</SELECT>");
        $select.appendTo(args.container);
        $select.focus();
    };

    this.destroy = function() {
        $select.remove();
    };

    this.focus = function() {
        $select.focus();
    };

    this.loadValue = function(item) {

        defaultValue = item[args.column.field];
        $select.val(defaultValue);
    };

    this.serializeValue = function() {
        if(args.column.options){
          return $select.val();
        }
    };

    this.applyValue = function(item,state) {
        item[args.column.field] = state;
    };

    this.isValueChanged = function() {
        return ($select.val() != defaultValue);
    };

    this.validate = function() {
        return {
            valid: true,
            msg: null
        };
    };

    this.init();
}

但这里我的问题是我无法在初始加载时加载文本值，并且在从下拉单元格中选择一个值后替换为值而不是选择文本。在此示例中，我生成了以下格式的数据

var data =[{"key":"1","value":"Item1"},{"key":"2","value":"item2"}];

Answer 1

您还应该在列定义中添加格式化程序。例如

{id:'id',name:'thename',...,options:data, editor:  SelectCellEditor,formatter:SelectCellFormatter}

其中SelectCellFormatter:

    SelectCellFormatter: function(row,cell,value,columnDef, dataContext){
        // filter options based on key value
        var ret = columnDef.options.filter(function(a){return a.key==value})
        // return the value
        if(ret.length>0){
            return ret[0].value;
        } else {
            return null;
        }

    }