Tabulator tips

第23回 日付入力用エディター

2020.04.28

今回は日付入力用エディターを作成します。

TabulatorドキュメントCustom Editorsより抜粋

別のタイプのエディターが必要な場合は、カスタムエディター機能をeditor オプションに渡すことができます。 この関数は5つの引数を取ります。

  1. 編集中のセルの CellComponent。
  2. セルがレンダリングされたときに呼び出す関数(要素が表示された後にフォーカスを設定したり、ディスプレイを整頓するために使用できる)。
  3. ユーザーがセルに新しいデータを正常に入力したときに新しい値を返すために呼び出す関数。
  4. ユーザーが編集を中止した場合に呼び出す関数。
  5. editorParams 列定義プロパティから渡されるパラメータ。

カスタムエディター関数は、セルに挿入されるエディターのDOMノードを返す必要があります。また、編集を中止する場合はfalseの値を返す必要があります。

入力用エディターのカスタム関数は TabulatorドキュメントCustom Editors にあるサンプルプログラムを使用します。 サンプルプログラムに行ったの修正は以下の通りです。

  • セルの日付表示を YYYY/MM/DD に変更。
  • successFunc に空白チェックを追加。 (moment が Invalid date を返すためエラーチェック)
  • style の指定を削除。
  • コメントを日本語にした。

セルを２度クリックすると入力カレンダーが表示されます。 動作しないときは画面のセル以外の部分をクリックしてから、セルをクリックし直すと動作するようになると思います。

日付入力用のカスタム関数は以下のようになります。

var dateEdit = function(cell, onRendered, success, cancel, editorParams){
    // cell-編集可能なセルのセルコンポーネント
    // onRendered-エディターがレンダリングされたときに呼び出す関数
    // success-正常に更新された値をTabulatorに渡すために呼び出す関数
    // cancel-編集を中止して通常のセルに戻るために呼び出す関数
    // editorParams-editorParams列定義プロパティに渡されるparamsオブジェクト

    // 日付入力用エディターを作成
    var editor = document.createElement("input");
    editor.setAttribute("type","date");

    // エディターの値をセルの現在の値に設定します
    editor.value = moment(cell.getValue(), "YYYY/MM/DD").format("YYYY-MM-DD");

    //エディターが選択されたときに選択ボックスにフォーカスを設定します
    // （タイムアウトによりエディターをDOMに追加できます）
    onRendered(function(){editor.focus()});

    //値が設定されたら、更新するセルをトリガーします
    var successFunc = function() {
        var val = "";
        if(editor.value) // 空白チェック
            val=moment(editor.value,"YYYY-MM-DD").format("YYYY/MM/DD");
        success(val);
    }
    editor.addEventListener("change", successFunc);
    editor.addEventListener("blur", successFunc);

    //return the editor element
    return editor;
};

moment.js を使用するので以下のCDN を読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>

カラム定義

{ title:"日付", field:"date", editor:dateEdit, width:150 },

データ定義

{ date: "2019/5/1"},

サンプルコード

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables@4.4.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
</head>
<body onload="show_table()">
<h1 id=title>日付入力用エディター</h1>
<div id="table"></div>

<script type="text/javascript">
var dateEdit = function(cell, onRendered, success, cancel, editorParams){
    // cell-編集可能なセルのセルコンポーネント
    // onRendered-エディターがレンダリングされたときに呼び出す関数
    // success-正常に更新された値をTabulatorに渡すために呼び出す関数
    // cancel-編集を中止して通常のセルに戻るために呼び出す関数
    // editorParams-editorParams列定義プロパティに渡されるparamsオブジェクト

    // 日付入力用エディターを作成
    var editor = document.createElement("input");
    editor.setAttribute("type","date");

    // エディターの値をセルの現在の値に設定します
    editor.value = moment(cell.getValue(), "YYYY/MM/DD").format("YYYY-MM-DD");

    //エディターが選択されたときに選択ボックスにフォーカスを設定します
    // （タイムアウトによりエディターをDOMに追加できます）
    onRendered(function(){editor.focus()});

    //値が設定されたら、更新するセルをトリガーします
    var successFunc = function() {
        var val = "";
        if(editor.value) // 空白チェック
            val=moment(editor.value,"YYYY-MM-DD").format("YYYY/MM/DD");
        success(val);
    }
    editor.addEventListener("change", successFunc);
    editor.addEventListener("blur", successFunc);

    //return the editor element
    return editor;
};
var show_table=function(){
    var tdata = [
        { date: "2019/5/1"},
    ];
    var columns= [
        { title:"日付", field:"date", editor:dateEdit, width:150 },
    ];
    new Tabulator("#table", {
        data:tdata,
        columns: columns
    });
}
</script>

著者プロフィール

naka

すきなコマンドは awk と bc です。なにかを計算する時、awk か bc を使います。

記事一覧Index