在 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

  • 詳情:

    數據收集函數，用於收集要添加到下拉過濾框中的選項數據。 常用於處理通過 formatter 顯示的標簽數據（如逗號分隔的標簽列表）。

  • 默認值: undefined

filterControlMultipleSearch

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

  • 類型: bool

  • 詳情:

    是否啟用多重搜索功能。設置為 true 時，用戶可以在一個輸入框中搜索多個值。

    多個搜索值之間使用分隔符進行拆分，分隔符可通過 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" }