今回はチェックボックスです。 formatter:"tickCross"を指定することでチェックボックスを表示します。
チェックボックスの表示は以下になります。
- true: 緑のチェック表示
- false: 赤のxマーク表示
上記以外の表示にしたい場合は、formatterParamsの設定で変更します。
formatterParams:{
tickElement:"<b>check</b>", // true の時の表示
crossElement:"not check", // false の時の表示
}}
カラム定義 editor の設定により、操作可、不可になります。
- editor: true の場合、セルのチェック操作が可能
- editor: false, 設定しない場合、表示のみ
※ このページの「実行結果」を操作すると、チェック表示がずれます。 これは、このページの css 設定が影響しているようです。 サンプルコードを実行した場合、チェック表示は特にずれることはないようです。
以下、カラム定義、データ定義、実行結果、サンプルコードです。
カラム定義
columns: [
{title:"操作可能1",field:"canEdit1",formatter:"tickCross",
editor:true},
{title:"操作可能2",field:"canEdit2",formatter:"tickCross",
editor:true,
formatterParams:{
tickElement: "<b>check</b>",
crossElement:"not check"
}
},
{title:"表示のみ1",field:"cantEdit1",formatter:"tickCross"},
{title:"表示のみ2",field:"cantEdit2",formatter:"tickCross"},
],
データ定義
data:[
{canEdit1:true, canEdit2:true, cantEdit1:true, cantEdit2:false}
]
実行結果
サンプルコード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables@4.5.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.5.3/dist/js/tabulator.min.js"></script>
<style type="text/css">
{
padding:100;
}
</style>
</head>
<body onload=show_table()>
<h1 id=title>チェックボックス</h1>
<div id="table"></div>
<script type="text/javascript">
const show_table=function(){
new Tabulator("#table", {
columns: [
{title:"操作可能1",field:"canEdit1",formatter:"tickCross",
editor:true},
{title:"操作可能2",field:"canEdit2",formatter:"tickCross",
editor:true,
formatterParams:{
tickElement: "<b>check</b>",
crossElement:"not check"
}
},
{title:"表示のみ1",field:"cantEdit1",formatter:"tickCross"},
{title:"表示のみ2",field:"cantEdit2",formatter:"tickCross"},
],
data:[
{canEdit1:true, canEdit2:true, cantEdit1:true, cantEdit2:false}
]
});
};
</script>