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

Question

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

谢谢

Answer 1

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

在那种情况下，您希望在选择类型编辑器中有一系列灵活的选项。为此，您可以向列定义中添加一个额外的选项(例如称为选项)，如下所示:

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