带有内联编辑的 Slick Grid SelectBox，它在选择值后显示文本

Question

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

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();
}

但我的问题是我无法在初始加载时加载文本值，并且在 select 从下拉单元格中取值后用值代替 select 文本。在这个例子中，我生成了如下格式的数据

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

Answer 1

您还应该在列定义中添加 formatter。例如

{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;
        }

    }

带有内联编辑的 Slick Grid SelectBox，它在选择值后显示文本

Slick Grid SelectBox with inline Edit which displays Text after Selecting values

javascript

jquery

slickgrid