單擊網格選擇框與內聯編輯選擇值後顯示文本

我想用光滑的網格來表示數據。但在我看來，大部分數據都是以選擇框的形式出現的。我從這裏查看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"}];

來源

2016-09-17 Geo V L

你也應該在你的列定義添加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; 
     } 

    }

來源

2016-09-24 19:24:34 winghei

單擊網格選擇框與內聯編輯選擇值後顯示文本

回答

相關問題