フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

tabulatorの使い方①

tabulatorを触ってみて、ほんと便利と思ったが、マニュアルが英語しかなく見づらい。
ある程度、機能について理解できてきたため、書いてみる。

テーブルの宣言

    // テーブルを定義
    $("#hogeTable").tabulator({});

定義の中にもいろいろと宣言できる。

    // 項目の指定
    var No = {
        title: "No", // タイトル名
        field: "No", // フィールド名
        headerSort: false // ソートの有無
    }
    var Comment = {
        title: "Comment ",
        field: "Comment ",
        headerSort: false
    }

    // カラムの設定
    var hogeTableColumns= [No,Comment]; // 連想配列を配列で入れる

    // テーブルを定義
    $("#hogeTable").tabulator({
        resizableColumns:false, // カラムの固定
        selectable:1, // 1行を選択できるようにする
        rowSelectionChanged:function(data, rows){
            // 選択したときのイベント
            console.log(rows);
        }, 
        columns: hogeTableColumns, // テーブルのカラム
        tooltipGenerationMode:"hover", // マウスオーバーでツールチップ表示
        tooltips:function(cell){
            // ツールチップのイベント
            console.log(cell);
        },
    });

tabulatorは各行にidが設定されるため、
行更新や行削除などは、idを指定してデータを処理する。
(DBのPrimaryKeyみたいな感じ)

テーブルに対する処理

// テーブルのデータをすべて取得
var data = $("#hogeTable").tabulator("getData");

// テーブルに行を追加
$("#hogeTable").tabulator("addRow", addRowInfo);

// 選択した行(idにて指定)を削除
$("#hogeTable").tabulator("deleteRow", id);

// 選択した行の上(Idにて指定)に1行挿入する
$("#hogeTable").tabulator("addRow", 追加する行情報, true, id)

// 第3引数のtrue/falseは、選択したidの上に行を追加するか、下に行を追加するかを制御する引数。
// true:第4引数で指定したid行の上に行を追加
// false:第4引数で指定したid行の下に行を追加

// 追加する行情報は連想配列となる。

// 選択した行(idにて指定)を更新
 $("#hogeTable").tabulator("updateData", [複数の行情報]);

// 行情報の更新は、idを含む連想配列を第二引数に渡してあげることで
// 指定したid行を更新してくれる。
// 下記の連想配列を第二引数に入れた場合は、id:1とid:2の行が更新される。
var test = [
    {
        id:1,
        No:1,
        Comment:"test1"
    },
    {
        id:2,
        No:2,
        Comment:"test2"
    }
]

// 連想配列の値には、更新したい要素を指定することで、
// 対象の要素のみを更新することができる。

// id指定行を取得
var selectedRowNo = $("#hogeTable").tabulator("getRow", id)

//取得した行情報に対して「.getData().要素名」でcellの値を取得できる
// selectedRowNo.getData().Comment のような感じ

// テーブル再描画
$("#hogeTable").tabulator("redraw");

// テーブルクリア
$("#hogeTable").tabulator("clearData");

項目をcomboboxにする場合

カラムの定義で「editor: “select”」オプションを追加する。

    // comboboxの要素を定義
    var testList = function(){
        var tmpTestList = {};

        tmpTestList["test1"] = "test1";
        tmpTestList["test2"] = "test2";
        tmpTestList["test3"] = "test3";

        return tmpTestList;
    }

    var test = {
        title: "テスト",
        field: "test",
        headerSort: false,
        width: 250,
        editor: "select",
        editorParams: testList(),
        cellEdited: function (cell) {
      // セル変更時のイベント
            console.log(cell.id);
        } 
    }

さらに、comboboxの要素を動的に変更したい場合

    // comboboxの要素を定義
    var testList = function(){
        var tmpTestList = {};

        tmpTestList["test1"] = "test1";
        tmpTestList["test2"] = "test2";
        tmpTestList["test3"] = "test3";

        return tmpTestList;
    }

    // 項目の指定
    var No = {
        title: "No", // タイトル名
        field: "No", // フィールド名
        headerSort: false // ソートの有無
    }
    var Comment = {
        title: "Comment ",
        field: "Comment ",
        headerSort: false
    }
    var test = {
        title: "テスト",
        field: "test",
        headerSort: false,
        width: 250,
        editor: "select",
        editorParams: testList(),
        cellEdited: function (cell) {
            // セル変更時のイベント
            console.log(cell.id);
        }
    }

    // カラムの設定
    var hogeTableColumns= [No,Comment,test]; // 連想配列を配列で入れる

    // comboboxの要素を作成
    var testList = testList();
    testList["test4"] = "test4";

    // comboboxの要素を再定義
    test.editorParams = testList;
    $("#hogeTable").tabulator("setColumns", hogeTableColumns);

こんな感じ。

[紹介元] jQueryタグが付けられた新着投稿 – Qiita tabulatorの使い方①

コメント

記事に戻る

コメントを残す