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

ヘッダーでの絞込の機能追加

headerFilterFunc:を利用する

5. タブ区切りのファイルをtabulator で表示するの絞込項目を追加しよう

LRG(Locus Reference Genomic)のIDが割り振られているものだけを表示できるよう機能追加する
Symbolのヘッダーのフィルター機能のように、LRGのヘッダー部分にフィルター機能を付加する

ヘッダーフィルター機能について

tabulator内部ではeditorの設定を利用している
編集可能な内容とフィルター可能な内容は基本的に同じものという思想なのだろう
ただし、editorを設定する事でその項目が編集可能になってしまう
内容を編集したいわけでは無いので、editorを定義した上でヘッダーのフィルターの項目部分にのみ適用する事とする

作成する関数は下記の通り

• editorにヘッダーフィルターに利用する項目を定義する
  • function lrgEditor(cell, onRendered, success, cancel, editorParams)　editor を返す関数
    • ヘッダーフィルターに利用されるDOMオブジェクトを渡す ( $()で文字列をDOMオブジェクトに変換)
    • ヘッダーフィルターの変更（ドロップダウンリストが変更）された際にテーブル表示をリフレッシュするためにイベントを追加
• データの先頭にheaderFilterの値が含まれている場合にtrueそれ以外の場合にfalseを返す
  • headerFilterStartsWith(headerValue, rowValue, rowData, filterParams)
    • ここではheaderValueとして"LRG"又は""が渡ってくる
    • データの先頭に指定の文字が有ればtrue

詳細については、TabulatorのFiltering Data, Editing & Manipulating Dataを参照

<script>
    // Define Edit function for header filter as for now.
    function lrgEditor(cell, onRendered, success, cancel, editorParams) {
        //cell - the cell component for the editable cell
        //onRendered - function to call when the editor has been rendered
        //success - function to call to pass the successfully updated value to Tabulator
        //cancel - function to call to abort the edit and return to a normal cell
        //editorParams - editorParams object set in column definition
        //create editor
        _lrgEditorString = "<select><option value=''></option><option value='LRG'>LRG</option></select>"
        //convert it to DOM and define editor.
        var editor = $(_lrgEditorString);
        //when the value has been set, trigger the cell to update
        editor.on("change blur", function (e) {
            success(editor.val());
        });
        return editor;
    }

    function headerFilterStartsWith(headerValue, rowValue, rowData, filterParams) {
        // Return true if rowValue starts with headerValue
        //headerValue - the value of the header filter element
        //rowValue - the value of the column in this row
        //rowData - the data for the row being filtered
        //filterParams - params object passed to the headerFilterFuncParams property
        //console.log(rowValue, rowValue.indexOf(headerValue), headerValue);
        return rowValue.startsWith(headerValue);
    }
</script>

"LRG"コラムを上記の関数を利用して定義

• headerFilter: として lrgEditor を設定（ヘッダー部分のドロップダウンリストの設定)
• headerFilterFunc: として headerFilterStartsWith を設定(指定の文字列から始まるもののみtrue)

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

ヘッダー部分のLRGのドロップダウンリストを選択することで、LRGで始まるデータの含まれる行のみ表示することができる

コラムの定義を下記の様に headerFilter: に渡す editorと edit: に渡すeditorを個別に変更して、ヘッダー部分ではドロップダウンリストで選択、編集時には文字列を入力とすることもできる

            {title: "LRG", field: "LRG", headerFilter: lrgEditor, headerFilterFunc: headerFilterStartsWith, editor: "input"},

今回はここまで。