Handsontableのエディタで入力後の自動整形をする

投稿者: | 2020年1月16日
0件のコメント

Excel風の入力をWebで実現するHandsontableでセルにデータを入力後、自動で成形する処理を実装しました。サンプルとして、日付や時刻の表現に自動成形します。

サンプル―お手本

セルプロパティで設定した文字数以上の入力は不可にするものをお手本に選びました。このサンプルはWebをあさると、そのまま見つかると思います。これを参考に時刻の表現置換するエディタを作ります。なお、お手本は下記です。

https://stackoverflow.com/questions/26427150/handsontable-limit-cell-characters/28889414

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

hh:mm形式の整形

開始、終了、除外、工数項目に設定し、0900や900と入力後セルのフォーカスをはずすと、09:00に整えます。

(function(Handsontable) {
    'use strict';
    var padding = function(str, length) {
        var zero = "";
        for (var i = 0; i < length; i++) {
            zero += "0";
        }
        return (zero + str).slice(-1 * length);
    }
    var hhmmEditor = Handsontable.editors.TextEditor.prototype.extend();
    hhmmEditor.prototype.finishEditing = function(isCancelled, ctrlDown) {
        var val = this.getValue();
        var reg = "([0-9]{1,2}):?([0-9]{2})";
        var matches = val.match(reg)
        if (matches == null) {
            this.setValue("");
        } else {
            this.setValue(padding(matches[1], 2) + ":" + padding(matches[2], 2));
        }
        Handsontable.editors.TextEditor.prototype.finishEditing.apply(this, arguments);
    };
    Handsontable.editors.hhmmEditor = hhmmEditor;
    Handsontable.editors.registerEditor('hhmm', hhmmEditor);
})(Handsontable);

使うには、handsontableのオプションであるcolumnsに指定します。

      {
        data: "time_from",
        type: 'text',
        editor: 'hhmm'
      }

おわりに

今回の内容はつまるところ、「セルに値を入力して編集を終了をしたタイミングで、その値の参照とセルへの書き込みができる」ということにつきます。調査などしていませんが、そのセルの番地（行・列）を突き止めることができれば、「社員番号を入力後に氏名など所属組織情報などをajaxで取得して隣のセルにセットする。」ということもできそうですね。

No related posts.