在 SlickGrid 中添加自定义列属性

Question

我想为我在 SlickGrid 中的一些列添加自定义列属性。我有一个自定义编辑器，它使用正则表达式来验证输入。我想在我的列中添加一个正则表达式语句属性，以便我可以为每个列使用相同的编辑器，并从它们列中获取唯一的正则表达式语句。 我想要这样的列：

var columns = [{ id: "id", name: "#", field: "id", cssClass: "cell-title", resizeable: true, sortable: true },
           { id: "upc", name: "UPC", field: "upc", resizable: true, sortable: true, editor: regexValidationEditor, regex: /^[a-zA-Z0-9 ]{0,20}$/ },
           { id: "price", name: "Price", field: "price", resizable: true, sortable: true, editor: regexValidationEditor, regex: /^\d*\.?\d{0,3}$/ }];

如果我可以在我的验证函数中做这样的事情：

function regexValidationEditor(args) {
    var $value;
    var inputBox = "<INPUT class='customInput' type=text />";
    var scope = this;

    this.init = function () {
        $value = $(inputBox)
        .appendTo(args.container);

        scope.focus();
    };

    this.validate = function () {
        if (!args.column.regex.test($value.val())) {
            return { valid: false, msg: "Invalid Data Entry" };
        }
        return { valid: true, msg: null };
    };

    this.init();
}

显然，这是行不通的，但它符合我想要做的事情。

Answer 1

列信息就像您定义它一样进入，因此自定义属性将在那里。提供所有必要的editor functions，验证将起作用。

Fiddle

function Editor(args) {
  var $input, defaultValue;
  var scope = this;

  this.init = function () {
    $input = $("<INPUT type=text class='editor-text' />")
        .appendTo(args.container)
        .bind("keydown.nav", function (e) {
        if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
            e.stopImmediatePropagation();
        }
    })
        .focus()
        .select();
  };

  this.validate = function () {
    if (!args.column.regex.test($input.val())) {
         
        return {
            valid: false,
            msg: "Invalid Data Entry"
        };
    }
    return {
        valid: true,
        msg: null
    };
  };

  this.applyValue = function (item, state) {
    item[args.column.field] = state;
  };

  this.destroy = function () {
    $input.remove();
  };

  this.focus = function () {
    $input.focus();
  };

  this.getValue = function () {
    return $input.val();
  };

  this.setValue = function (val) { 
    $input.val(val);
  };

  this.loadValue = function (item) {
    defaultValue = item[args.column.field] || "";
     
    $input.val(defaultValue);
    $input[0].defaultValue = defaultValue;
    $input.select();
 };

 this.serializeValue = function () {
    return $input.val();
 };

 this.isValueChanged = function () {
    return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
 };

 scope.init();
}