개시하다

Handsontable Advent Calendar 2018 15일째 보도다.
마지막으로 "[Handsontable] 변경 태그 추가 및 확인 필요"에서 변경 태그 부여 및 필수 검사를 수행했으며, 이번에는 최대 단어 수 제한(Max Length)이 적용됩니다.

최대 단어 수 제한(MaxLength)

Handsontable의 셀 입력은 MaxLength를 지원하지 않습니다.
따라서 사용자는 사용자 정의 편집기에서 대응할 수 있다.
참조: Handsontable Limit Cell Characters

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

var hot = new Handsontable(grid, {

최대 문자의 자릿수와 사용자 정의 편집기 정의 옵션을 추가합니다.
maxLength: 5, editor: 'maxlength'

var hot = new Handsontable(grid, {
    data: [],
    colHeaders: ['編集', '選択', '商品CD', '商品名', '単価', '備考'],
    columns: [
        { data: COL_EDIT, readOnly: true, type: 'text' },
        { data: COL_SELECT, type: 'checkbox' },
        { data: COL_PRODUCTCODE, type: 'text', width: 80, validator: function (value, callback) { callback(true); }, maxLength: 5, editor: 'maxlength' },
        { data: COL_PRODUCTNAME, type: 'text', width: 200, className: "htLeft htMiddle", validator: function (value, callback) { callback(true); }, maxLength: 30, editor: 'maxlength' },
        { data: COL_UNITPRICE, type: 'numeric', numericFormat: { pattern: '0,00', culture: 'ja-JP' }, validator: function (value, callback) { callback(true); } },
        { data: COL_COMMENT, type: 'text', width: 300, className: "htLeft htMiddle", validator: function (value, callback) { callback(true); }, maxLength: 100, editor: 'maxlength' }
    ],

이렇게 되면 예를 들면 상품 코드에 5자리만 입력할 수 있다.