GitHubで見る

Table Filter Control

Bootstrap Table のフィルターコントロール拡張機能。テーブルの列にフィルター機能を追加します。

このページ

フィルターコントロール拡張機能は、テーブルの各列に入力ボックスまたはドロップダウン選択ボックスなどのフィルターコントロールを追加し、ユーザーがデータを素早くフィルタリングできるようにして、データクエリの効率を向上させます。

使用法

<link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
<script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>

例

Filter Control

オプション

filterControl

  • 属性: data-filter-control

  • タイプ: Boolean

  • 詳細:

    列フィルター機能を有効にするかどうか。true に設定すると、テーブルの列に入力ボックスまたはドロップダウン選択ボックスなどのフィルターコントロールが自動的に追加されます。

  • デフォルト値: false

filterControlVisible

  • 属性: data-filter-control-visible

  • タイプ: Boolean

  • 詳細:

    フィルターコントロールを表示するかどうか。false に設定すると、すべてのフィルター入力コントロールが非表示になりますが、フィルター機能は有効のままです。

  • デフォルト値: true

alignmentSelectControlOptions

  • 属性: data-alignment-select-control-options

  • タイプ: String

  • 詳細:

    ドロップダウン選択ボックス内のオプションの配置を設定します。選択可能な値：left（左揃え）、right（右揃え）、または auto（自動揃え）。

  • デフォルト値: undefined

filterControlContainer

  • 属性: data-filter-control-container

  • タイプ: Selector

  • 詳細:

    フィルターコントロールのコンテナセレクターを指定します。例えば #filter に設定すると、すべてのフィルターコントロールが id が filter の要素にレンダリングされます。

    コンテナ内の各フィルター要素（input または select）には、クラス名 bootstrap-table-filter-control-<FieldName> が含まれている必要があります。ここで <FieldName> は、対応する列の field 属性値に置き換える必要があります。

  • デフォルト値: false

filterDataCollector

  • 属性: data-filter-data-collector

  • タイプ: Function

  • 詳細:

    データ収集関数。ドロップダウンフィルターボックスに追加するオプションデータを収集するために使用されます。 主に、フォーマッターを通じて表示されるラベルデータ（例：コンマ区切りのラベルリスト）を処理するために使用されます。

  • デフォルト値: undefined

filterControlMultipleSearch

  • 属性: data-filter-control-multiple-search

  • タイプ: bool

  • 詳細:

    複数検索機能を有効にするかどうか。true に設定すると、ユーザーは 1 つの入力ボックスで複数の値を検索できます。

    複数の検索値は区切り文字で分割され、区切り文字は filterControlMultipleSearchDelimiter オプションでカスタマイズできます。

  • デフォルト値: false

filterControlMultipleSearchDelimiter

  • 属性: data-filter-control-multiple-search-delimiter

  • タイプ: String

  • 詳細:

    検索値を分割する際に使用する区切り文字を定義します。

  • デフォルト値: ,

filterControlSearchClear

  • 属性: data-filter-control-search-clear

  • タイプ: bool

  • 詳細:

    検索クリア機能を有効にするかどうか。true に設定すると、テーブルオプション showSearchButton と組み合わせて、すべてのフィルター条件をワンクリックでクリアできます。

  • デフォルト値: true

searchOnEnterKey

  • 属性: data-search-on-enter-key

  • タイプ: Boolean

  • 詳細:

    true に設定すると、ユーザーが Enter キーを押したときに検索がトリガーされます。

  • デフォルト値: false

showFilterControlSwitch

  • 属性: data-show-filter-control-switch

  • タイプ: Boolean

  • 詳細:

    true に設定すると、フィルターコントロールのスイッチボタンを表示します。

  • デフォルト値: false

sortSelectOptions

  • 属性: data-sort-select-options

  • タイプ: Boolean

  • 詳細:

    true に設定すると、ドロップダウンコントロール内のオプションを並べ替えます。

  • デフォルト値: false

列オプション

filterControl

  • 属性: data-filter-control

  • タイプ: String

  • 詳細:

    その列のフィルターコントロールのタイプを設定します：

    • input：テキスト入力ボックス
    • select：ドロップダウン選択ボックス
    • datepicker：HTML5 日付選択器

  • デフォルト値: undefined

filterControlPlaceholder

  • 属性: data-filter-control-placeholder

  • タイプ: String

  • 詳細:

    入力ボックスコントロールのプレースホルダーテキストを設定します。コントロールタイプが input の場合にのみ有効です。

  • デフォルト値: ''

filterCustomSearch

  • 属性: data-filter-custom-search

  • タイプ: function

  • 詳細:

    カスタム検索関数。組み込み検索の代わりに使用されます。入力パラメータ：

    • text：検索テキスト。
    • value：比較される列値。
    • field：列フィールド名。
    • data：テーブルデータ。

    false を返すと、現在の行/列をフィルターします。true を返すと、保持します。null を返すと、現在の値のカスタム検索をスキップします。

  • デフォルト値: undefined

filterData

  • 属性: data-filter-data

  • タイプ: String

  • 詳細:

    カスタムドロップダウンフィルターデータを設定します。以下をサポートします： var:variable 変数からロード； obj:variable.key オブジェクトからロード； url:http://www.example.com/data.json リモート JSON ファイルからロード； json:{key:data} JSON 文字列からロード； func:functionName 関数の戻り値からロード。

  • デフォルト値: undefined

filterDatepickerOptions

  • 属性: data-filter-datepicker-options

  • タイプ: Object

  • 詳細:

    日付選択器を使用する場合、このオプションを通じてネイティブ設定を渡します。例：data-filter-datepicker-options='{"max":value1, "min": value2, "step": value3}'。詳細は公式ドキュメントを参照してください。

  • デフォルト値: undefined

filterDefault

  • 属性: data-filter-default

  • タイプ: String

  • 詳細:

    フィルターのデフォルト値を設定します。

  • デフォルト値: undefined

filterOrderBy

  • 属性: data-filter-order-by

  • タイプ: String

  • 詳細:

    ドロップダウンオプションの並べ替え方法を設定します：昇順（'asc'）、降順（'desc'）、またはサーバー側が返す順序（'server'）。

  • デフォルト値: 'asc'

filterStartsWithSearch

  • 属性: data-filter-starts-with-search

  • タイプ: Boolean

  • 詳細:

    true に設定すると、「プレフィックス一致」検索モードを有効にします。

  • デフォルト値: false

filterStrictSearch

  • 属性: data-filter-strict-search

  • タイプ: Boolean

  • 詳細:

    true に設定すると、厳密一致検索モードを有効にします。

  • デフォルト値: false

アイコン

  • clear: 'glyphicon-trash icon-clear'
  • filterControlSwitchHide: 'glyphicon-zoom-out icon-zoom-out'
  • filterControlSwitchShow: 'glyphicon-zoom-in icon-zoom-in'

イベント

onColumnSearch (column-search.bs.table)

  • 列データが検索をトリガーしたときにトリガーされます。

onCreatedControls (created-controls.bs.table)

  • フィルターコントロールの作成が完了したときにトリガーされます。

メソッド

triggerSearch

  • 検索操作を手動でトリガーします。

clearFilterControl

  • このプラグインが追加したすべてのコントロールをクリアします（showSearchClearButton オプションに類似）。

toggleFilterControl

  • フィルターコントロールの表示/非表示を切り替えます。

ローカライゼーション

formatClearFilters

  • タイプ: Function

  • デフォルト値: function () { return "Clear Filters" }

formatFilterControlSwitch

  • タイプ: Function

  • デフォルト値: function () { return "Hide/Show controls" }

formatFilterControlSwitchHide

  • タイプ: Function

  • デフォルト値: function () { return "Hide controls" }

formatFilterControlSwitchShow

  • タイプ: Function

  • デフォルト値: function () { return "Show controls" }