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

您还应在列定义中添加 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;
        }

    }

具有内联编辑的光滑网格选择框，在选择值

1 个答案: