今回は日付入力用エディターを作成します。
TabulatorドキュメントCustom Editorsより抜粋
別のタイプのエディターが必要な場合は、カスタムエディター機能をeditor オプションに渡すことができます。 この関数は5つの引数を取ります。
- 編集中のセルの CellComponent。
- セルがレンダリングされたときに呼び出す関数(要素が表示された後にフォーカスを設定したり、ディスプレイを整頓するために使用できる)。
- ユーザーがセルに新しいデータを正常に入力したときに新しい値を返すために呼び出す関数。
- ユーザーが編集を中止した場合に呼び出す関数。
- editorParams 列定義プロパティから渡されるパラメータ。
カスタムエディター関数は、セルに挿入されるエディターのDOMノードを返す必要があります。また、編集を中止する場合はfalseの値を返す必要があります。
入力用エディターのカスタム関数は TabulatorドキュメントCustom Editors にあるサンプルプログラムを使用します。 サンプルプログラムに行ったの修正は以下の通りです。
- セルの日付表示を YYYY/MM/DD に変更。
- successFunc に空白チェックを追加。 (moment が Invalid date を返すためエラーチェック)
- style の指定を削除。
- コメントを日本語にした。
セルを2度クリックすると入力カレンダーが表示されます。 動作しないときは画面のセル以外の部分をクリックしてから、セルをクリックし直すと動作するようになると思います。
日付入力用のカスタム関数は以下のようになります。
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>