テーブルフィルターコントロール

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>

例

フィルターコントロール

オプション

filterControl

• 属性: data-filter-control

• タイプ: Boolean

• 詳細

  true に設定すると、カラムに input または select が追加されます。

• デフォルト: 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

• タイプ: セレクター

• 詳細

  例えば、#filter に設定すると、ID が filter の要素にカスタム入力フィルターを許可します。各フィルター要素 (input または select) には、bootstrap-table-filter-control-<FieldName> クラスが必要です (は、定義された [フィールド](https://bootstrap-table.dokyumento.jp/docs/api/column-options/#field) 名に置き換える必要があります)。

• デフォルト: false

filterDataCollector

• 属性: data-filter-data-collector

• タイプ: 関数

• 詳細

  セレクトフィルターに追加されるデータを収集します。例えば、カンマ区切りのラベルをフォーマッタで表示してフィルタリングします。

• デフォルト: undefined (未定義)

filterControlMultipleSearch

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

• タイプ: bool (真偽値)

• 詳細

  true に設定すると、一度に複数の値を検索できます。値は区切り文字で分割されます。オプション filterControlMultipleSearchDelimiter を参照してください。

• デフォルト: false

filterControlMultipleSearchDelimiter

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

• タイプ: String

• 詳細

  オプション filterControlMultipleSearchDelimiter で検索値を分割するために使用される区切り文字を定義します。

• デフォルト: ,

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

• 詳細

  これを設定すると、入力フィルターコントロールにのみプレースホルダーが表示されます。

• デフォルト: ''

filterCustomSearch

• 属性: data-filter-custom-search

• タイプ: 関数

• 詳細

  カスタム検索関数は、組み込み検索関数の代わりに実行され、4 つのパラメーターを受け取ります。

  • 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

• タイプ: オブジェクト

• 詳細

  datepicker オプションが設定されている場合、このオプションを使用してネイティブオプションで datepicker を設定します。次のように使用します: 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

アイコン

• クリア: '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 () { return "フィルターのクリア" }

formatFilterControlSwitch

• タイプ: 関数

• デフォルト: function () { return "コントロールの表示/非表示" }

formatFilterControlSwitchHide

• タイプ: 関数

• デフォルト: function () { return "コントロールの非表示" }

formatFilterControlSwitchShow

• タイプ: 関数

• デフォルト: function () { return "コントロールの表示" }