今回は、ajax で json データを読み込み後、データ修正を行います。
ajax で json データを読み込み後、データ修正は ajaxResponse コールバックに 指定した関数で操作を行います。
Tabulatorドキュメント「Ajax Response」より抜粋
ajaxResponse コールバックは、ajax リクエストが成功した時に呼び出されます。 このコールバックでデータを変更することができます。 データは return する必要があります。 return しない場合、データは表示されません。
ajaxURL 属性で読み込む json ファイルを指定します。 サンプルコードを実行する場合は、データ定義の内容を ajax.json というファイルに保存して、サンプルコードと同じディレクトリに置いてください。
ajaxURL: "ajax.json"
ajaxResponse コールバックで、 name_date フィールド(タイトル:"日付(名称)") に値を設定する処理を行います。
ajaxResponse:function(url,params,response){
//url - リクエストURL
//params - リクエストで渡されるパラメーター
//response - ajax から渡されたJSONオブジェクト
response.forEach(item=>{
item.name_date = `${item.date}(${item.name})`;
});
// 修正したデータを返す
return response;
},
以下、カラム定義、データ定義、実行結果、サンプルコードです。
カラム定義
let columns=[
{title:"名称", field:"name"},
{title:"日付", field:"date"},
{title:"日付(名称)", field:"name_date"},
];
データ定義
[
{
"name": "May",
"date": "2019/5"
},
{
"name": "April",
"date": "2019/4"
}
]
実行結果
サンプルコード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables@4.6.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.6.3/dist/js/tabulator.min.js"></script>
</head>
<body onload="show_table()">
<h1 id=title>ajaxでjsonデータ読み込み後、データ修正</h1>
<div id="table"></div>
<script type="text/javascript">
const show_table = function(){
let columns=[
{title:"名称", field:"name"},
{title:"日付", field:"date"},
{title:"日付(名称)", field:"name_date"},
];
new Tabulator("#table", {
ajaxResponse:function(url,params,response){
//url - リクエストURL
//params - リクエストで渡されるパラメーター
//response - ajax から渡されたJSONオブジェクト
response.forEach(item=>{
item.name_date = `${item.date}(${item.name})`;
});
// 修正したデータを返す
return response;
},
ajaxURL: "ajax.json",
columns:columns
});
}
</script>