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

【问题标题】：Slickgrid, column with a drop down select list?Slickgrid，带有下拉选择列表的列？
【发布时间】：2011-02-07 01:35:29
【问题描述】：

您好，我想知道是否有人知道是否可以将 slickgrid 中的列定义为下拉选择列表。如果没有，有 slickgrid 经验的人知道我应该如何添加这个选项吗？

谢谢

【问题讨论】：

标签： javascript jquery slickgrid tablecolumn

【解决方案1】：

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

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

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

【讨论】：

太棒了！我不仅使用了您的想法来添加select，而且该示例对于更好地理解如何将参数传递给编辑器也很有用。
@Matthijs 是否可以添加动态选项？即假设我在网格中有两个下拉列表作为编辑器，基于第一个选择，我想要第二个下拉列表中的可能选项。有可能吗？
@VivekVardhan - 是的，传入一个返回值集的函数
@Matthijs 是否可以为每一行动态下拉。例如，我需要根据 id 动态加载下拉列表。并且每一行下拉菜单都有不同的选项我该如何实现？
@Matthijs 我们能否改进用于保存数据的键值对[{"1":"Red","2":"Green"}] 选项。需要获取保存 json 选项的值，但需要在网格上显示文本。因为在所有的 doropdowns 中，我们都有一个保存在某处的主列表

【解决方案2】：

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

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

    this.init = function() {
        $select = $("<SELECT tabIndex='0' class='editor-yesno'><OPTION value='yes'>Yes</OPTION><OPTION value='no'>No</OPTION></SELECT>");

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

【讨论】：

谢谢，这是我一直在寻找的东西，我想我必须修改它并尝试向列添加一些参数，以便您可以随时更改列。类似于 jqGrid 用于选择列表 atm 的功能。

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

没有 jq 和内联注入的元素，打包在模块中：

'use strict';
 class SelectCellWidget {
    constructor(args) {
        this._args = args;
        this._$select = undefined;
        this._defaultValue = undefined;
        this._init();
    }
     _init () {
        let selects, container, divend, opt_values;
        const args = this._args;
        if(args.column.options){
            opt_values = args.column.options.split(',');
        }else{
            opt_values = ["yes","no"];
        }
        container = document.createElement("div");
        container.classList.add('select-editable');
        divend = document.createElement('input');
        divend.setAttribute("type", "text");
        divend.setAttribute("name", "format");
        divend.setAttribute("value", "");
        selects = document.createElement("select");//"<select id='Mobility' tabIndex='0' class='editor-select'>"+ option_str +"</select>";
        selects.setAttribute("id", "Mobility");
        selects.setAttribute("tabIndex", 0);
        selects.setAttribute("class", "editor-select");
        for(let i = 0; i < opt_values.length; i++) {
            let v = opt_values[i];
            let option = document.createElement("option");
            option.setAttribute("value", v);
            option.innerText = v;
            selects.appendChild(option);
        }

        container.appendChild(divend);
        container.appendChild(selects);
        this._$select = container;
        args.container[0].appendChild(this._$select);
        this._$select.focus();
        document.getElementById("Mobility").selectedIndex = args.item[args.column.field] ? opt_values.indexOf(args.item[args.column.field]) : 0;
    }
     destroy () {
        this._$select.remove();
    }
     focus () {
        this._$select.focus();
    }
     loadValue (item) {
       this._defaultValue = item[this._args.column.field];
       this._$select.value = this._defaultValue;
    }
     serializeValue () {
        if(this._args.column.options){
            return this._$select.lastElementChild.value;
        }else{
            return (this._$select.lastElementChild.value === "yes");
        }
    }
     applyValue (item,state) {
       item[this._args.column.field] = state;
    }
     isValueChanged () {
       return (this._$select.lastElementChild.value !== this._defaultValue);
    }
     validate () {
       return {
           valid: true,
           msg: null
       };
    }
}
module.exports=SelectCellWidget;

https://github.com/YaAlfred/SlickgridSelectDropdownWidget

【讨论】：