Tabulator tips

第9回 マウスカーサーを変更する

2020.01.22

クリックできるセルを明示するため、 リンクやcellClick定義しているセルを「指差し(cursor:pointer)」、 その他を「矢印(cursor:default)」にしたい。

tabulator は、Selectable Row 機能により、セルのカーサーは「指差し(cursor:pointer)」になっている。 そのため、以下の処理を行って、クリックできるセルのカーサーのみを「指差し(cursor:pointer)」にします。

  • Selectable Row 機能を無効にして、セルのカーサーを「矢印(cursor:default)」にする。 (selectable:false)

  • 「指差し(cursor:pointer)」にしたいセルを formatter で cursor 定義する。 (cell.getElement().style.cursor="pointer")

処理内容は以下の通り、

var set_pointer=function(cell){
    cell.getElement().style.cursor="pointer";
    return cell.getValue();
}
new Tabulator("#table", {
    selectable: false,  // Selectable Row 機能を無効にする。

以下、カラム定義、データ定義、実行結果、サンプルコードです。

カラム定義

{   
    title:"クリック可能セル(link)",
    field:"link",
    formatter: set_pointer
},
{   
    title:"クリック可能セル",
    field:"clickable",
    cellClick:function(e,cell){alert('click!')},
    formatter: set_pointer
},
{   
    title:"通常セル(クリックできない)",
    field:"unclickable"
},

データ定義

{
    link:"<a href=http://google.com/>google</a>",
    clickable:"クリックできるセル",
    unclickable:"クリックできない",
}

実行結果

サンプルコード

<!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>マウスカーサーを変更する </h1>
<div id="table"></div>

<script type="text/javascript">
var set_pointer=function(cell){
    cell.getElement().style.cursor="pointer";
    return cell.getValue();
}
var show_table=function(){
    var tdata = [
        {
            link:"<a href=http://google.com/>google</a>",
            clickable:"クリックできるセル",
            unclickable:"クリックできない",
        }
    ];
    var columns = [
        {   
            title:"クリック可能セル(link)",
            field:"link",
            formatter: set_pointer
        },
        {   
            title:"クリック可能セル",
            field:"clickable",
            cellClick:function(e,cell){alert('click!')},
            formatter: set_pointer
        },
        {   
            title:"通常セル(クリックできない)",
            field:"unclickable"
        },
    ];
    new Tabulator("#table", {
        selectable: false,  // Selectable Row 機能を無効にする。
        data:tdata,
        columns: columns
    });
}
</script>

著者プロフィール

naka

すきなコマンドは awk と bc です。なにかを計算する時、awk か bc を使います。

記事一覧Index