GitHubで見る

テーブル列の並べ替え

Bootstrap Tableの列並べ替え拡張機能。ドラッグによるテーブル列の順序調整を可能にします。

このページ

依存関係

この拡張機能は以下のライブラリに依存しています:

  • dragTable v2.0.14(CSSも同時にインポートする必要があります)
  • jquery-ui v1.11

使用方法

<link rel="stylesheet" href="dragtable.css">
<script src="jquery-ui.js"></script>
<script src="jquery.dragtable.js"></script>
<script src="extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script>

Reorder Columns

オプション

reorderableColumns

  • 属性: data-reorderable-columns

  • 型: Boolean

  • 詳細:

    列のドラッグ機能を有効にするかどうかを制御します。true に設定すると、ユーザーはテーブルヘッダーをドラッグして列の順序を調整できます。

  • デフォルト値: false

dragaccept

  • 属性: data-dragaccept

  • 型: String

  • 詳細:

    指定されたCSSクラスを持つ列のみをドラッグ可能にします。

  • デフォルト値: null

maxMovingRows

  • 属性: data-max-moving-rows

  • 型: Integer

  • 詳細:

    ドラッグ時に同時に移動する行数を制御します。1に設定するとテーブルヘッダーのみを移動します。超大規模なテーブル(セル数 > 1000)の場合、パフォーマンスを向上させるためにこの設定を使用することをお勧めします。

  • デフォルト値: 10

イベント

onReorderColumn (reorder-column.bs.table)

列のドラッグが完了したときにトリガーされます。パラメータは新しいテーブルヘッダーフィールドの順序です。

メソッド

orderColumns

  • パラメータ: object、例:{name: 0, price: 1}

  • 詳細:

    渡された設定オブジェクトに基づいて列の順序を並べ替えます。オブジェクトのキーは field(列フィールド名)、値は列のインデックス(0から始まります)です。