Handsontable 限制单元字符答案

【问题标题】：Handsontable Limit Cell CharactersHandsontable 限制单元字符
【发布时间】：2014-12-13 03:54:33
【问题描述】：

我一直在寻找一个非常简单的问题的答案，如何阻止用户在 Handsontable 的单元格中输入 250 个字符？我发现我可以重新创建验证，但这不会阻止用户输入超过 250 个字符。我正在寻找类似 maxlength 的东西：

<input id="notes" maxlength="250" />



var date_validator_regexp = /(^$|^(0[1-9]|1[012])[/](0[1-9]|[12][0-9]|3[01])[/][0-9]{4}$)/;
var limit_validator_regexp = /(^[\s\S]{0,250}$)/;

        $("#gridUpdateNotes").handsontable({
            startRows: 1,
            startCols: 2,
            colHeaders: ["Date", "Notes"],
            columnSorting: false,
            enterBeginsEditing: false,
            autoWrapRow: true,
            autoWrapCol: true,
            minSpareRows: 1,
            colWidths: [140, 450],
            removeRowPlugin: true,
            copyPaste: true,
            afterValidate: function (isValid, value, row, prop, source) {
                if (isValid == false && prop === "Notes") {
                    alert("The Notes cannot have more than 250 characters.");
                }
            },
            columns: [
              {
                  data: "NoteDate",
                  type: "date",
                  dateFormat: "mm/dd/yy",
                  allowInvalid: false,
                  validator: date_validator_regexp
              },
              {
                  data: "Notes",
                  allowInvalid: false,
                  validator: limit_validator_regexp
    }
            ]
        });

【问题讨论】：

标签： jquery handsontable

【解决方案1】：

这个问题已经有几个月的历史了，所以 Filjan 可能不再需要答案了。但希望这会对某人有所帮助。

您可以使用函数，而不是使用正则表达式作为验证器。

像这样定义列对我有用...

cmlCols = [
    {
       data: "Notes",
       validator: function (value, callback) {
           if (value.length > 255) {
               alert('Must be 255 character or less. Extra characters will be removed');
               this.instance.setDataAtCell(this.row, this.col, value.substring(0, 255), null);
           }
           callback(true);
       }];

【讨论】：

【解决方案2】：

我认为创建一个新的单元格编辑器似乎是解决此问题的更好方法：

(function (Handsontable) {

'use strict';

var MaxLengthEditor = Handsontable.editors.TextEditor.prototype.extend();

MaxLengthEditor.prototype.prepare = function () {
    Handsontable.editors.TextEditor.prototype.prepare.apply(this, arguments);

    this.TEXTAREA.maxLength = this.cellProperties.maxLength;
};

Handsontable.editors.MaxLengthEditor = MaxLengthEditor;
Handsontable.editors.registerEditor('maxlength', MaxLengthEditor);

})(Handsontable);

【讨论】：

与其他答案相比，此方法的优点是：用户甚至不允许输入超过 maxLength 个字符。我无法按原样使用它。从来没有想过如何设置自定义 cellProperties.maxLength，但设法找到了一个解决方法，结合这个自定义编辑器和一个稍微修改的自定义渲染器。