2016-09-17 76 views
1

我想用光滑的网格来表示数据。但在我看来,大部分数据都是以选择框的形式出现的。我从这里查看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(); 
} 

但在这里我的问题是我不能inital负荷加载文本值,然后从下拉列表中小区的值后替换值而不是选择文本。在这个例子中,我生成的数据,如下面的格式

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

回答

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

    }