SlickGrid選擇編輯器

我想爲選定的單元格創建一個動態填充的html選擇。我從數據庫中提取一些信息，這些信息對於每個行項目都是不同的。問題在於編輯器丟失了初始數據，我不知道如何爲特定單元保留一些數據。有人曾經做過嗎？SlickGrid選擇編輯器

function StandardSelectCellEditor($container, columnDef, value, dataContext) { 
var $input; 
var $select; 
var defaultValue = value; 
var scope = this; 

this.init = function() { 
    $input = $("<INPUT type=hidden />"); 
    $input.val(value); 
    } 

    $input.appendTo($container); 

    $select = $("<SELECT tabIndex='0' class='editor-yesno'>"); 
    jQuery.each(value, function() { 
     $select.append("<OPTION value='" + this + "'>" + this + "</OPTION></SELECT>"); 
    }); 
    $select.append("</SELECT>"); 

    $select.appendTo($container); 

    $select.focus(); 
}; 


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


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

this.setValue = function(value) { 
    $select.val(value); 
    defaultValue = value; 
}; 

this.getValue = function() { 
    return $select.val(); 
}; 

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

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

this.init(); 
};

來源

2010-07-09 Catalin

人們可能會喜歡這個鏈接http://onmylemon.co.uk/2014/06/writing-an-editor-for-slickgrid/它會給你編寫SlickGrid編輯器的良好基礎。 – onmylemon 2014-07-22 07:29:35

一個類似的問題被問到here（但這個不是slickgrid標記）。

我做了一個SelectEditor，根據我們所在的列選擇了一個靈活的選項範圍。這裏考慮的原因是您在列中編輯的值的數據類型將決定該字段的有效選擇。

爲了做到這一點，你可以像這樣添加一個額外的選項，您的列定義（例如所謂的選項）：在使用args.column.options

var columns = [ 
    {id:"color", name:"Color", field:"color", options: "Red,Green,Blue,Black,White", editor: SelectCellEditor} 
    {id:"lock", name:"Lock", field:"lock", options: "Locked,Unlocked", editor: SelectCellEditor},

]

和訪問在你自己的SelectEditor對象的init方法中，像這樣：

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

     this.init = function() { 

      if(args.column.options){ 
       opt_values = args.column.options.split(','); 
      }else{ 
       opt_values ="yes,no".split(','); 
      } 
      option_str = "" 
      for(i in opt_values){ 
       v = opt_values[i]; 
       option_str += "<OPTION value='"+v+"'>"+v+"</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(); 
      }else{ 
       return ($select.val() == "yes"); 
      } 
     }; 

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

來源

2010-10-28 08:33:42 Matthijs

你是否真的需要針對每個單獨領域的不同選擇選項？如果是這樣的話，你可以考慮編碼值，如果每個字段本身作爲具有值和選項的對象（例如「藍色|紅色，綠色，藍色，黑色，白色」），則需要額外的CellFormatter來顯示值，更改CellEditor代碼以從「|」符號後面的值中獲取選項。編輯完成後請注意寫回包含選項列表的值，以免丟失此信息... – Matthijs 2010-10-28 08:42:49

你可以稍微修改上面的SelectCellEditor爲每個單元創建不同的選擇選項。

function SelectCellEditor(args) { 

    ..... 

    // just to get the DOM element 
    this.getInputEl = function() { 
     return $input; 
    }; 
}

現在很容易創建一個動態下拉編輯器。

function DynamicSelectCellEditor(args) { 
    // 1: if you already have a select list for individual cells 
    args.columns.options = optionsList[args.item.id] // or any custom logic 
    return new Slick.Editors.SelectCellEditor(args); 

    /*    OR    */ 

    // 2: if data needs to be fetched from the server 
    var editor = new Slick.Editors.SelectCellEditor(args), 
     $select = editor.getInputEl(); 

    $select.html("<option>Loading...</option>"); 
    $.ajax({ }).done(function(list) { 
     // Update select list 
     $select.html(newHtml); 
    }); 

    return editor; 
}

來源

2013-04-08 21:09:30

與

$.each(opt_values , function(index, value) { 
    option_str += "<OPTION value='"+value+"'>"+value+"</OPTION>"; 
});

更換

for(i in opt_values){ 
      v = opt_values[i]; 
      option_str += "<OPTION value='"+v+"'>"+v+"</OPTION>"; 
}

如果它不爲你工作

來源

2014-01-17 21:41:23 user3208386

請嘗試下面的代碼。

在slick.editors.js中，定義一個新的編輯器。

$.extend(true, window, { 
    "Slick": { 
     "Editors": { 
     "SelectOption": SelectCellEditor, 
     ..... 
     } 
    } 
    }); 
function SelectCellEditor(args) { 
    var $select; 
    var defaultValue; 
    var scope = this; 
    var s; 
    this.init = function() { 
     opt_values = eval(args.column.options); 
     option_str = ""; 
     var tuples = []; 
     for (var key in opt_values) tuples.push([key, opt_values[key]]); 
     tuples.sort(function(a, b) { return a[1] < b[1] ? 1 : a[1] > b[1] ? -1 : 0 }); 
     var length = tuples.length; 
     while (length--) option_str += "<OPTION value='"+tuples[length][0]+"'>"+tuples[length][1]+"</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() { 
      return $select.val(); 
    }; 

    this.applyValue = function(item,selectedIndex) { 
     if($.isNumeric(selectedIndex)) 
      item[args.column.field] = parseInt(selectedIndex); 
     else 
      item[args.column.field] = selectedIndex; 
    }; 

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

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

    this.init(); 
}

然後修改網格選項

var grid_options = { 
editable:    true, 
enableAddRow:  false, 
multiColumnSort: true, 
explicitInitialization: true, 
dataItemColumnValueExtractor: function(item, columnDef) { 
if(columnDef.editor == Slick.Editors.SelectOption){ 
    return eval(columnDef.options)[item[columnDef.field]]; 
    }else{ 
    return item[columnDef.field]; 
    } 
}

};

並在列初始化時使用編輯器。

{id: "currency_id", name: "Currency *", field: "currency_id", editor: Slick.Editors.SelectOption, options: { 1: 'Dollar', 2: 'Yen', 3: 'Rupiah' }, sortable: true,width: 234}

來源

2014-02-13 04:02:45 HeiN

我還不能添加評論，但我需要添加一些內容給HeiN的答案。

HeiN的答案很好，但我有數據進來，不匹配我的選擇選項，我仍然需要顯示該數據...所以我不得不修改選項中的dataItemColumnValueExtractor。這可以讓我的原始數據顯示，如果我沒有在列表中的選項匹配。

 dataItemColumnValueExtractor: function(item, columnDef) { 
      if(columnDef.editor == Slick.Editors.SelectOption){ 
       return eval(columnDef.options)[item[columnDef.field]] != null ? eval(columnDef.options)[item[columnDef.field]] : item[columnDef.field]; 
      }else{ 
       return item[columnDef.field]; 
      } 
     }

希望這可以幫助某個人後來下線。

來源

2015-03-05 20:17:33 David

SlickGrid選擇編輯器

回答

相關問題