Slickgrid，带有下拉选择列表的列？

嗨，我想知道是否有人知道是否可以将slickgrid中的列定义为下拉选择列表。 如果不是，那些对slickgrid有一定经验的人知道我应该如何添加这个选项？

谢谢

Answer 1

我假设你的意思是自定义单元格编辑器。 这是一个来自slick.editors.js的基于选择的布尔单元格编辑器示例。 您可以轻松地修改它以使用任意一组可能的值。

function YesNoSelectCellEditor($container, columnDef, value, dataContext) { var $select; var defaultValue = value; var scope = this; this.init = function() { $select = $("YesNo"); if (defaultValue) $select.val('yes'); else $select.val('no'); $select.appendTo($container); $select.focus(); }; this.destroy = function() { $select.remove(); }; this.focus = function() { $select.focus(); }; this.setValue = function(value) { $select.val(value); defaultValue = value; }; this.getValue = function() { return ($select.val() == 'yes'); }; this.isValueChanged = function() { return ($select.val() != defaultValue); }; this.validate = function() { return { valid: true, msg: null }; }; this.init(); }; 

Answer 2

您可能不希望为每个选项范围创建一个新的选择编辑器。 此外，您可能事先不知道所有选项值的范围。

在这种情况下，您需要在选择类型编辑器中提供灵活的选项范围。 为此，您可以为列定义添加额外选项（例如，调用选项），如下所示：

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

  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 3

如果您的单元格已包含带有多个选项的“select”-tag，则可以从args中提取此html。 该方法与之前的答案不同，但我个人对这些解决方案感到困扰，当然我的单元格已经包含了一个select-tag。 我想重用这个单元格，而不是在this.init完全重构它。 同样，我想继续使用与现有select相同的选项，而不是将它们解析为var column = { ...

$( args.item[ args.column.field ] )返回活动单元格内容，基本上只是重新附加到container （单元格对象）。 从if ( document.createEvent ) ，只是一个自动打开激活下拉列表的function; 当您使用制表工具导航到单元格时。

 function SelectCellEditor( args ) { var $select; var defaultValue; var scope = this; this.init = function () { $select = $( args.item[ args.column.field ] ); $select.appendTo( args.container ); $select.focus(); // Force the select to open upon user-activation var element = $select[ 0 ]; if ( document.createEvent ) { // all browsers var e = new MouseEvent( "mousedown", { bubbles: true, cancelable: true, view: window }); element.dispatchEvent( e ); } else if ( element.fireEvent ) { // ie element.fireEvent( "onmousedown" ); } }; } 

Dropdown html-input的完整编辑器 – > Dropdown html-output

 function SelectCellEditor( args ) { var $select = $( args.item[ args.column.field ] ); var defaultValue; var scope = this; this.init = function () { //$select $select.appendTo( args.container ); // Force the select to open upon user-activation var element = $select[ 0 ]; if ( document.createEvent ) { // all browsers var e = new MouseEvent( "mousedown", { bubbles: true, cancelable: true, view: window }); element.dispatchEvent( e ); } else if ( element.fireEvent ) { // ie element.fireEvent( "onmousedown" ); } $select.on("click", function( e ) { var selected = $( e.target ).val(); $select.find( "option" ).removeAttr( "selected" ); $select.find( "option[value='" + selected + "']" ).attr( "selected", "selected" ); }); }; this.destroy = function () { $select.remove(); }; this.focus = function () { }; this.loadValue = function ( item ) { }; this.serializeValue = function () { }; // Only runs if isValueChanged returns true this.applyValue = function ( item, state ) { item[ args.column.field ] = $select[ 0 ].outerHTML; }; this.isValueChanged = function () { return true; }; this.validate = function () { return { valid: true, msg: null }; }; this.init(); }