javascript – SlickGrid选择编辑器

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

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

解决方法

有一个类似的排队问题是 here(这个不是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 += "<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();
    }

原文链接：https://www.f2er.com/js/150027.html

javascript – SlickGrid选择编辑器

解决方法

猜你在找的JavaScript相关文章