Tabulator tips

第13回 プルダウンメニューを表示する

2020.02.19

editor:"select"でプルダウンメニューを表示する方法について記述します。

プルダウンメニューは editorParams.values に配列で設定します。

editorParams:{values:["aa0", "aa1", "aa2", "aa3"]}

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

カラム定義

{
    title:"プルダウン",
    field:"pulldown",
    editor:"select",
    editorParams:{
        values:["aa0", "aa1", "aa2", "aa3"]
    }
},

データ定義

data:[ {pulldown: "aa1"} ], // 初期表示

実行結果

サンプルコード

<!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">
const show_table=()=>{
    new Tabulator("#table", {
        data:[ {pulldown: "aa1"} ], // 初期表示
        columns:[
            {
                title:"プルダウン",
                field:"pulldown",
                editor:"select",
                editorParams:{
                    values:["aa0", "aa1", "aa2", "aa3"]
                }
            },
        ],
    });
}
</script>

著者プロフィール

naka

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

記事一覧Index