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

显然，这不起作用，但这是我想要做的事情的基本思路。

- Tommy Godsey

---

我认为如果验证失败，每个列记录都应包含一个记录描述性消息。 - user557597

我不确定我是否正确理解了你的问题，但是你是否在寻找一个正则表达式编辑器/验证器？如果这就是你要找的，那么请看我对一个非常相似的问题所做的回答https://dev59.com/H2DVa4cB1Zd3GeqPaihc#9301137 ... 如果不是这个，那么你能否再解释一下。希望这有所帮助。你可以在其他答案中投票，或者我也可以在这里重新复制答案 :) - ghiscoding

@ghiscoding 就是这样！如果我将自定义字段放入列中，我不确定如何访问它们，但我看到您通过args.column.editorOptions获取了它们。 - Tommy Godsey

Answer 1

列信息会按照您定义的方式输入，因此自定义属性将存在。提供所有必要的编辑器函数，验证将起作用。

演示

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

- Origineil

---

就是这样！我必须通过 args.column 来获取属性。 - Tommy Godsey