View on GitHub

表格过滤控制

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 以在列中添加 inputselect

  • 默认值: 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,以允许在具有 filter ID 的元素中使用自定义输入过滤器。 每个过滤器元素(输入或选择)必须具有以下类 bootstrap-table-filter-control-<FieldName> 必须替换为定义的[字段](https://bootstrap-table.com/docs/api/column-options/#field)名称)。

  • 默认值: false

filterDataCollector

  • 属性: data-filter-data-collector

  • 类型: Function

  • 详情:

    收集将添加到选择过滤器的数据,以便过滤例如逗号分隔的标签并使用格式化器显示。

  • 默认值: 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 以在用户按回车键时触发搜索操作。

  • 默认值: false

showFilterControlSwitch

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

  • 类型: Boolean

  • 详情:

    设置为 true 以显示过滤控件开关按钮。

  • 默认值: false

sortSelectOptions

  • 属性: data-sort-select-options

  • 类型: Boolean

  • 详情:

    设置为 true 以对选择控件的选项元素进行排序。

  • 默认值: false

Column options

filterControl

  • 属性: data-filter-control

  • 类型: String

  • 详情:

    设置 input: show an input control, select: show a select control, datepicker: show a html5 datepicker control.

  • 默认值: undefined

filterControlPlaceholder

  • 属性: data-filter-control-placeholder

  • 类型: String

  • 详情:

    设置此项以仅在输入过滤器控件中显示占位符。

  • 默认值: ''

filterCustomSearch

  • 属性: data-filter-custom-search

  • 类型: function

  • 详情:

    自定义搜索函数将替代内置搜索函数执行,并接受四个参数:

    • text: the search text.
    • value: the value of the column to compare.
    • field: the column field name.
    • data: the table 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(降序)。

  • 默认值: undefined

filterStartsWithSearch

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

  • 类型: Boolean

  • 详情:

    设置为 true 以搜索以搜索词开头的值。

  • 默认值: false

filterStrictSearch

  • 属性: data-filter-strict-search

  • 类型: Boolean

  • 详情:

    设置为 true 以使用严格搜索模式。

  • 默认值: false

Icons

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

Events

onColumnSearch(column-search.bs.table)

  • Fired when we are searching into the column data

onCreatedControls(created-controls.bs.table)

  • Fired when we are searching into the column data

Methods

triggerSearch

  • Trigger manually the search action

clearFilterControl

  • Clear all the controls added by this plugin (similar to showSearchClearButton option).

toggleFilterControl

  • Toggles the visibility (show/hide) of the filter controls.

Localizations

formatClearFilters

  • type: Function

  • Default: function () { return "Clear Filters" }

formatFilterControlSwitch

  • type: Function

  • Default: function () { return "Hide/Show controls" }

formatFilterControlSwitchHide

  • type: Function

  • Default: function () { return "Hide controls" }

formatFilterControlSwitchShow

  • type: Function

  • 类型: Function

  • 默认值: function () { return "显示控件" }