LoginSignup
3
6

More than 5 years have passed since last update.

[Bootstrap-Table] JavaScriptでテーブル表示(その4)イベント

Last updated at Posted at 2018-12-24

Bootstrap Table のイベントについて紹介します。

Bootstrap Table
http://bootstrap-table.wenzhixin.net.cn/

JavaScriptライブラリ
Bootstrap Table: 1.12.1

テーブルの描画

pre-body.bs.tableは、テーブルを描画が始まる前に発火するイベントです。

テーブルの描画前イベント
}).on('pre-body.bs.table', function (data) {
    log('[pre-body.bs.table]');
})

post-body.bs.tableは、テーブルを描画が終わったときに発火するイベントです。

テーブルの描画後イベント
}).on('post-body.bs.table', function (data) {
    log('[post-body.bs.table]');
})

クリック

click-row.bs.tableは、テーブルの行をクリックしたときに発火するイベントです。

行のクリックイベント
}).on('click-row.bs.table', function (element, row) {
    log('[click-row.bs.table] row=' + JSON.stringify(row));
})

click-cell.bs.tableは、テーブルのセルをクリックしたときに発火するイベントです。

セルのクリックイベント
}).on('click-cell.bs.table', function (element, field, value) {
    log('[click-cell.bs.table] field=' + field + ', value=' + value);
})

チェックボックス

check.bs.tableは、チェックボックスのチェック(あり)のときに発火するイベントです。

チェックボックスありイベント
}).on('check.bs.table', function (element, row) {
    log('[check.bs.table] row=' + JSON.stringify(row));
})

uncheck.bs.tableは、チェックボックスのチェック(なし)のときに発火するイベントです。

チェックボックスなしイベント
}).on('uncheck.bs.table', function (element, row) {
    log('[uncheck.bs.table] row=' + JSON.stringify(row));
})

ソート

sort.bs.tableは、テーブルのカラムをクリックしてソートしたときに発火するイベントです。

ソートイベント
}).on('sort.bs.table', function (element, name, order) {
    log('[sort.bs.table] name=' + name + ', order=' + order);
})

ページング

page-change.bs.tableは、テーブルのページを変更したときに発火するイベントです。

ページングイベント
}).on('page-change.bs.table', function (event, size) {
    log('[page-change.bs.table] page=' + size);
})

デモはこちら
ソースファイルはこちら

以上です。

関連記事

[Bootstrap-Table] JavaScriptでテーブル表示(その1)
[Bootstrap-Table] JavaScriptでテーブル表示(その2)
[Bootstrap-Table] JavaScriptでテーブル表示(その3)
[Bootstrap-Table] JavaScriptでテーブル表示(その4)
[Bootstrap-Table] JavaScriptでテーブル表示(その5)

3
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
6