今回は scrollToRow() を使用して、指定した行を表示する方法 について記述します。 Tabulatorドキュメント「Scroll To Row」
table.scrollToRow(23, "center", false);
scrollToRow()の1番目の引数は以下を指定する。
- Row コンポーネント
- Row のid
- Row のDOMノード
2番目の引数はオプションであり、行の位置(top,center,bottom,nearest)を設定します。省略された場合、scrollToRowPositionオプションの値に設定されます。 デフォルト値は"top"
3番目の引数はオプションであり、 行が既に表示されている場合にテーブルをスクロールするかどうかを設定する。 スクロールする場合はtrue、スクロールしない場合はfalse、省略した場合はscrollToRowIfVisibleオプションの値に設定されます。デフォルトはtrue。
// id23の行を中央に表示する。
// id のデータがない場合は動作しない。
table.scrollToRow(23, "center", false);
// 条件からrowコンポーネントを取得して指定する。
let row = table.searchRows("val","=","x50");
table.scrollToRow(row[0],"center");
// scroll rowコンポーネント
table.scrollToRow(cell.getRow());
// scroll DOMノード
table.scrollToRow(cell.getRow().getElement());
id:23を中央にスクロール
値が"x50"の行をトップにスクロール
カラム定義
{
title:"id",
field:"id",
},
{
title:"値",
field:"val",
},
データ定義
var tdata = [];
for(let i=0;i<100; i++){
tdata.push({ id: i, val: 'x'+i });
}
サンプルコード
<!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>
</head>
<body onload=show_table()>
<h1 id=title> データの途中から表示する(scrollToRow) </h1>
<p><div id="table"></div></p>
<p><div id="table2"></div></p>
<script type="text/javascript">
var show_table=function(){
var tdata = [];
for(let i=0;i<100; i++){
tdata.push({ id: i, val: 'x'+i });
}
var columns = [
{
title:"id",
field:"id",
},
{
title:"値",
field:"val",
},
];
let table = new Tabulator("#table", {
height:350,
data:tdata,
columns: columns,
cellClick: function(e,cell){
// セルクリックした行をトップにスクロール
// 第一引数は scroll DOMノード を指定
table.scrollToRow(cell.getRow().getElement());
}
});
// id:23を中央にスクロール
table.scrollToRow(23, "center", false);
let table2 = new Tabulator("#table2", {
height:350,
data:tdata,
columns: columns,
cellClick: function(e,cell){
// scroll rowコンポーネント
table2.scrollToRow(cell.getRow());
}
});
let row = table2.searchRows("val","=","x50");
row[0].getElement().style.backgroundColor='yellow';
// 値が"x50"の行をトップにスクロール
table2.scrollToRow(row[0]);
}
</script>