表格过滤控制
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
-
类型:
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 "显示控件" }