3. タブ区切りのファイルをtabulator で表示する

表示方法の変更

2.タブ区切りのファイルをtabulator で表示するに次の変更を加える

• 表示する行のグループ化
• 並び替え不要なコラムの並び替えを無効化

groupBy: field item でtabulatorのテーブルをグループ化

tabulatorの設定時にgroupBy: "Symbol"を指定

<script>
    $(document).ready(function () {
        // コラムの定義
        var gene_columns = [
            {title: "id", field: "id", visible: false},
            {title: "GeneID", field: "GeneID", visible: false},
            {title: "Symbol", field: "Symbol", formatter: ncbiLinkByGeneSymbolFormatter},
            {title: "RSG", field: "RSG"},
            {title: "LRG", field: "LRG"},
            {title: "RNA", field: "RNA"},
            {title: "t", field: "t"},
            {title: "Protein", field: "Protein"},
            {title: "p", field: "p"},
            {title: "Category", field: "Category"},
        ];
        //　tabulatorの設定
        $("#gene-table").tabulator({
            groupBy: "Symbol",
            columns: gene_columns
        });
        // ajaxでデータの読み込み
        $("#gene-table").tabulator("setData", "./output.json");
    });
</script>

遺伝子Symbolでグループ化した表示となる

headerSort: boolean でヘッダーをクリックした際の並び替え機能を変更する

並び替える必要の無いコラムに headerSort: false を指定することで、指定したコラムの並び替えを無効にする

"t"及び"p"コラムの並び替えを無効化する
コラム定義部分のみ抜粋

        // コラムの定義
        var gene_columns = [
            {title: "id", field: "id", visible: false},
            {title: "GeneID", field: "GeneID", visible: false},
            {title: "Symbol", field: "Symbol", formatter: ncbiLinkByGeneSymbolFormatter},
            {title: "RSG", field: "RSG"},
            {title: "LRG", field: "LRG"},
            {title: "RNA", field: "RNA"},
            {title: "t", field: "t", headerSort: false},
            {title: "Protein", field: "Protein"},
            {title: "p", field: "p", headerSort: false},
            {title: "Category", field: "Category"}
        ];

ヘッダー部分に注目

ヘッダーの"t"と"p"の横の▲が消えてこのコラムでの並び替えができなくなった

今回はここまで