今回は tips ではなく公式ドキュメントから抜粋になります。 カスタム関数の使い方や引数の備忘録として掲載しました。
目次
Formatter (公式ホームページCustom Formatters)
組み込みの formatter と同様にカスタム関数を使用して formatter を定義できます。
フォーマッタ関数の引数は、フォーマットされるセルオブジェクトと列定義のformatterParamsオプションを取ります。
関数はセルの内容、セルのテキスト値、有効なHTMLまたはDOMノードのいずれかを返す必要があります。
formatter:function(cell, formatterParams, onRendered){
// cell-セルデータ
// formatterParams-列に設定されたパラメーター
// onRendered-formatterがレンダリングされたときに呼び出す関数
return "Mr" + cell.getValue(); //セルの内容を返します;
}
CelClick (公式ホームページCell Callbacks)
cellClickコールバックは、ユーザーがセルを左クリックしたときにトリガーされます。列定義オブジェクトのオプションを使用して、列ごとに設定できます。
cellClick:function(e, cell){
//e - クリックイベントオブジェクト
//cell - cellデータ
}
Sorter (公式ホームページCustom Sorters)
sorter オプションでカスタムソーター関数を定義できます。
sorter:function(a, b, aRow, bRow, column, dir, sorterParams){
// a、b-比較される2つの値
// aRow、bRow-比較される値の行オブジェクト（ソートのために行データの追加フィールドにアクセスする必要がある場合に使用）
// column-ソートされる列の列データ
// dir-ソートの方向（ "asc"または "desc"）
// sorterParams-列定義配列のsorterParamsオブジェクト
return a - b; // 2つの値の差を返す必要があります
}
Calc (公式ホームページCustom Caluculation Functions)
列で独自の計算をする場合、カスタム関数をtopCalcまたはbottomCalcオプションのいずれかに渡すことができます。
// 18歳以上のユーザー数をカウント
var adultCalc = function(values, data, calcParams){
// values-列値の配列
// data-すべてのテーブルデータ
// calcParams-列定義オブジェクトから渡されたパラメーター
var calc = 0;
values.forEach(function(value){
if(value > 18){
calc ++;
}
});
return calc;
}
//in your column definition for the column
{title:"Age", field:"age", topCalc:adultCalc},
Row Formatter(公式ホームページRow Formatting)
Tabulator は rowFormatter オプションを使用して行レベルのフォーマッターを定義することもできます。これにより、含まれるデータに基づいてテーブルの各行を変更できます。
この関数はフォーマットされる行の Row データを引数に取ります。 次の例では、行のcol値が「青」の場合、行の背景色を青に変更します。
rowFormatter:function(row){
//row - row component
var data = row.getData();
if(data.col == "blue"){
row.getElement().style.backgroundColor = "#A6A6DF";
}
}
Filter(公式ホームページCustom Filter Functions)
複雑なフィルターを実行する場合は setFilter メソッドにコールバック関数を渡します。2番目の引数はパラメーターオブジェクトです。
function customFilter(data, filterParams){
// data - フィルタリングされる行のデータ
// filterParams-フィルターに渡されるparamsオブジェクト
// フィルターが有効な場合はtrueを返します。
return data.name == "bob" && data.height < filterParams.height;
}
table.setFilter(customFilter, {height:3});
Validate(公式ホームページCustom Validateor Functions)
独自の Validate 関数を追加する場合は、validatorプロパティに関数を設定します。 値が Validate にパスした場合はtrueを返し、失敗した場合はfalseを返す必要があります。
// 指定された除数で割り切れる場合、false を返す
var noDivide = function（cell、value、parameters）{
// cell-編集されたセルのセルコンポーネント
// value-セルの新しい入力値
// parameters-バリデーターで渡されたパラメーター
// devisorで割り切れる場合、0:false を返す
return value%parameters.divisor;
}
{title:"Age",field:"age",editor:"input",
validator：[{type:noDivide, paramaters:{divisor:5}}]
}
Editor(公式ホームページCustom Editors)
別のタイプのエディターが必要な場合は、カスタムエディター機能をeditor オプションに渡すことができます。 この関数は5つの引数を取ります。
- 編集中のセルの Cellコンポーネント
- セルがレンダリングされたときに呼び出す関数(要素が表示された後にフォーカスを設定したり、ディスプレイを整頓するために使用できる)。
- ユーザーがセルに新しいデータを正常に入力したときに新しい値を返すために呼び出す関数。
- ユーザーが編集を中止した場合に呼び出す関数。
- editorParams 列定義プロパティから渡されるパラメータ。
カスタムエディター関数は、セルに挿入されるエディターのDOMノードを返す必要があります。または、編集を中止する場合はfalseの値を返す必要があります。
var dateEditor = function(cell, onRendered, success, cancel, editorParams){
// cell-編集可能なセルのセルコンポーネント
// onRendered-エディターがレンダリングされたときに呼び出す関数
// success-正常に更新された値をTabulatorに渡すために呼び出す関数
// cancel-編集を中止して通常のセルに戻るために呼び出す関数
// editorParams-editorParams列定義プロパティに渡されるparamsオブジェクト
//create and style editor
var editor = document.createElement("input");
editor.setAttribute("type", "date");
//create and style input
editor.style.padding = "3px";
editor.style.width = "100%";
editor.style.boxSizing = "border-box";
//Set value of editor to the current value of the cell
editor.value = moment(cell.getValue(), "DD/MM/YYYY").format("YYYY-MM-DD")
//set focus on the select box when the editor is selected (timeout allows for editor to be added to DOM)
onRendered(function(){
editor.focus();
editor.style.css = "100%";
});
//when the value has been set, trigger the cell to update
function successFunc(){
success(moment(editor.value, "YYYY-MM-DD").format("DD/MM/YYYY"));
}
editor.addEventListener("change", successFunc);
editor.addEventListener("blur", successFunc);
//return the editor element
return editor;
};
//in your column definition for the column
{title:"Birthday", field:"dob", editor:dateEditor}}
以上です。