テーブルのグループ化 v2

Bootstrap Tableのデータグループ化拡張機能。指定したフィールドでテーブルデータをグループ化して表示できます。

使用方法

<link rel="stylesheet" href="extensions/group-by-v2/bootstrap-table-group-by.css">
<script src="extensions/group-by-v2/bootstrap-table-group-by.js"></script>

例

Group By v2

オプション

groupBy

• 属性: data-group-by

• 型: Boolean

• 詳細:

  データグループ化機能を有効にするかどうかを制御します。true に設定すると、テーブルデータは指定されたフィールドでグループ化されて表示されます。

• デフォルト値: false

groupByField

• 属性: data-group-by-field

• 型: String|Array

• 詳細:

  グループ化に使用するフィールドを設定します：

  • 単一フィールドの場合は文字列を使用します。例：shape
  • 複数フィールドの場合は配列を使用します。例：['shape', 'color']

• デフォルト値: ''

groupByFormatter

• 属性: data-group-by-formatter

• 型: Function

• 詳細:

  グループ行のフォーマット関数。パラメータ：

  • value：グループ値。
  • idx：グループインデックス。
  • data：そのグループ内の行の配列。

• デフォルト値: undefined

groupByToggle

• 属性: data-group-by-toggle

• 型: Boolean

• 詳細:

  true に設定すると、グループの折りたたみ/展開を許可します。

• デフォルト値: false

groupByShowToggleIcon

• 属性: data-group-by-show-toggle-icon

• 型: Boolean

• 詳細:

  true に設定すると、折りたたみ状態に基づいて切り替えアイコンを表示します（groupByToggle と組み合わせて使用する必要があります）。

• デフォルト値: false

groupByCollapsedGroups

• 属性: data-group-by-collapsed-groups

• 型: Array|Function

• 詳細:

  リスト内のグループキーはデフォルトで折りたたまれます。このオプションは以下のいずれかです：

  • 変数（配列）
  • 配列文字列、例：['circle']
  • 配列を返す関数。パラメータは：
    • グループキー
    • グループ内のデータ

• デフォルト値: []