SlickGrid选择编辑器

我想为选择的单元格进行动态填充的html选择。 我从数据库中提取一些信息，这些信息对于每个行项都是不同的。 问题是编辑器丢失了初始数据，我不知道如何为特定单元格保留一些数据。 有人曾经这样做过吗？

function StandardSelectCellEditor($container, columnDef, value, dataContext) { var $input; var $select; var defaultValue = value; var scope = this; this.init = function() { $input = $(""); $input.val(value); } $input.appendTo($container); $select = $(""); jQuery.each(value, function() { $select.append("" + this + ""); }); $select.append(""); $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(); }; 

Answer 1

在这里询问了类似的排队（但是这个排队并没有被标记为slickgrid）。

我确实创建了一个SelectEditor，根据我们所在的列提供了灵活的选项范围。这里考虑的原因是您在列中编辑的值的数据类型将决定该字段的有效选择。

为此，您可以为列定义添加额外选项（例如，调用选项），如下所示：

  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方法中的args.column.options访问它，如下所示：

  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 += ""+v+""; } $select = $(""+ option_str +""); $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(); } 

Answer 2

您可以稍微修改上面的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("Loading..."); $.ajax({ }).done(function(list) { // Update select list $select.html(newHtml); }); return editor; } 

Answer 3

更换

 for( i in opt_values ){ v = opt_values[i]; option_str += ""+v+""; } 

同

 $.each(opt_values , function( index, value ) { option_str += ""+value+""; }); 

如果它不适合你

Answer 4

请尝试以下代码。

在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 += ""+tuples[length][1]+""; $select = $(""+ option_str +""); $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} 

Answer 5

我还无法添加评论，但我需要在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]; } } 

希望这有助于后来的人。