bootstraptable 手册_bootstrap-table中文文档（页疑翻译）
表格属性(jQuery.fn.bootstrapTable.defaults)
插件扩展属性名
table标签属性
类型
默认值
描述
无
data-toggle
String
'table'
不用写 JavaScript 直接启用表格。
classes
data-classes
String
table table-hover'
表格的类名称。默认情况下，表格是有边框的，你可以用 'table-no-bordered' 来删除表格的边框样式，注意设置后会覆盖默认样式，如需默认样式，请一起加上。
height
data-height
Number
undefined
定义表格的高度，可用js判断后设置。
undefinedText
data-undefined-text
String
'-'
代替undefined的字符，空字符串不算undefined
striped
data-striped
Boolean
FALSE
隔行变色
sortName
data-sort-name
String
undefined
数据加载时按哪一列排序
sortOrder
data-sort-order
String
'asc'
数据加载时的排序规则， 'asc' or 'desc'.
iconsPrefix
data-icons-prefix
String
'glyphicon'
定义图标组名称(“glyphicon”或“fa”FontAwesome)。在默认情况下使用“glyphicon”
icons
data-icons
Object
{
refresh: 'glyphicon-refresh icon-refresh',
toggle: 'glyphicon-list-alt icon-list-alt',
columns: 'glyphicon-th icon-th'
}
定义用于刷新图标,切换和列按钮图标
columns
无
Array
[]
列属性，请参照jQuery.fn.bootstrapTable.columnDefaults设置的列属性
data
无
Array
[]
需要渲染到table里的数据
ajax
data-ajax
Function
undefined
ajax获取数据，和jquery的ajax完全一样
method
data-method
String
'get'
请求数据的方式
url
data-url
String
undefined
请求数据的URL
cache
data-cache
Boolean
TRUE
AJAX请求缓存.
contentType
data-content-type
String
'application/json'
接收数据的文档类型
dataType
data-data-type
String
'json'
接收数据的类型
ajaxOptions
data-ajax-options
Object
{}
ajax参数
queryParams
data-query-params
Function
function(params) {
return params;
}
当请求远程数据时,您可以通过修改queryParams发送额外的参数。
例如queryParamsType ='limit',
params可以是:limit, offset, search, sort, order,
参数的值可以是:pageSize, pageNumber, searchText, sortName, sortOrder。
返回false则停止请求。
queryParamsType
data-query-params-type
String
'limit'
Set 'limit' to send query params width RESTFul type.
responseHandler
data-response-handler
Function
function(res) {
return res;
}
数据加载前出来响应返回的数据格式，res: the response data.return的数据为表格渲染所需数据
pagination
data-pagination
Boolean
FALSE
在表格底部显示详细信息和分页栏(当需要分页时)
onlyInfoPagination
data-only-info-pagination
Boolean
FALSE
只显示总记录数(无每页显示数和其他信息)，如：Showing 13 rows
sidePagination
data-side-pagination
String
'client'
定义分页方式'client' or 'server'，假如为'server'则需要设置'url' or 'ajax'
pageNumber
data-page-number
Number
1
当设置了pagination属性时，控制显示第几页
pageSize
data-page-size
Number
10
当设置了pagination属性时，控制每页显示数
pageList
data-page-list
Array
[10, 25, 50, 100, All]
每页显示数的选项list
selectItemName
data-select-item-name
String
btSelectItem'
radio or checkbox的name，提交表单用的，你懂的
smartDisplay
data-smart-display
Boolean
TRUE
只能选择table还是card视图(所谓的响应式，移动设备会自动使用card视图)
search
data-search
Boolean
FALSE
是否显示搜索框
strictSearch
data-strict-search
Boolean
FALSE
是否开启严格搜索
searchText
data-search-text
String
''
初始化搜索文本
searchTimeOut
data-search-time-out
Number
500
设置搜索超时
trimOnSearch
data-trim-on-search
Boolean
TRUE
搜索query是否自动去空格(trim)
showHeader
data-show-header
Boolean
TRUE
是否显示header
showFooter
data-show-footer
Boolean
FALSE
是否显示footer
showColumns
data-show-columns
Boolean
FALSE
是否显示tool(显示/隐藏某些列)
showRefresh
data-show-refresh
Boolean
FALSE
是否显示刷新按钮
showToggle
data-show-toggle
Boolean
FALSE
是否显示视图切换按钮
showPaginationSwitch
data-show-pagination-switch
Boolean
FALSE
是否显示“展开全部”按钮
minimumCountColumns
data-minimum-count-columns
Number
1
The minimum count columns to hide of the columns drop down list.
idField
data-id-field
String
undefined
Indicate which field is an identity field.
uniqueId
data-unique-id
String
undefined
把哪一列的值设为当前行tr的属性(data-uniqueid)的值
cardView
data-card-view
Boolean
FALSE
数据加载时是否用card视图模式
detailView
data-detail-view
Boolean
FALSE
数据加载时是否用详细视图模式(第一列为加号)
detailFormatter
data-detail-formatter
Function
function(index, row) {
return '';
}
格式化详细页面模式的视图。
searchAlign
data-search-align
String
'right'
搜索框位置，left or right
buttonsAlign
data-buttons-align
String
'right'
toolbar的按钮对齐方式，left or right
toolbarAlign
data-toolbar-align
String
'left'
自定义toolbar的按钮对齐方式，left or right
paginationVAlign
data-pagination-v-align
String
'bottom'
pagination显示的位置，top or bottom or both
paginationHAlign
data-pagination-h-align
String
'right'
pagination显示的位置，left or right
paginationDetailHAlign
data-pagination-detail-h-align
String
'left'
默认左边是详细信息，右边是分页栏，left or right
paginationPreText
data-pagination-pre-text
String
'
上一页文本
paginationNextText
data-pagination-next-text
String
'>'
下一页文本
clickToSelect
data-click-to-select
Boolean
FALSE
当点击该行时，checkbox或者radio选中
singleSelect
data-single-select
Boolean
FALSE
是否只允许checkbox选一行(即和radio功能一样)
toolbar
data-toolbar
String
undefined
toolbar容器的选择器名称，比如：#toolbar, .toolbar.
checkboxHeader
data-checkbox-header
Boolean
TRUE
是否显示checkbox全选
maintainSelected
data-maintain-selected
Boolean
FALSE
是否保持被选中的行，when改变页数或者搜索的时候
sortable
data-sortable
Boolean
TRUE
是否按列排序，假如为false，则不排序显示所有数据
silentSort
data-silent-sort
Boolean
TRUE
在客户端还是再服务器端排序，false则客户端，当sidePagination设置为server时该设置才生效
rowStyle
data-row-style
Function
{}
行样式，function(row, index)
row: 该行的数据
index: 该行的序号
rowAttributes
data-row-attributes
Function
{}
行属性，function(row, index)
row: 该行的数据
index: 该行的序号
列属性(jQuery.fn.bootstrapTable.columnDefaults)
插件扩展属性名
table标签属性
类型
默认值
描述
Name
Attribute
Type
Default
Description
radio
data-radio
Boolean
FALSE
是否显示单选radio
checkbox
data-checkbox
Boolean
FALSE
是否显示多选checkbox
field
data-field
String
undefined
该列映射的data的参数名
title
data-title
String
undefined
该列的表头名
titleTooltip
data-title-tooltip
String
undefined
该列表头的title提示文本
class
class / data-class
String
undefined
该列的class
rowspan
rowspan / data-rowspan
Number
undefined
合并单元格时定义合并多少行
colspan
colspan / data-colspan
Number
undefined
合并单元格时定义合并多少列
align
data-align
String
undefined
设置该列数据如何对齐，'left', 'right', 'center'
halign
data-halign
String
undefined
table header对齐方式， 'left', 'right', 'center'
falign
data-falign
String
undefined
table footer对齐方式， 'left', 'right', 'center'
valign
data-valign
String
undefined
单元格(cell)对齐方式. 'top', 'middle', 'bottom'
width
data-width
Number {Pixels or Percentage}
undefined
列的宽度，可以使用像素或者百分比，不带单位则默认为px
sortable
data-sortable
Boolean
FALSE
该列是否排序(表头显示双箭头)
order
data-order
String
'asc'
该列默认的排序方式， 'asc' or 'desc'.
visible
data-visible
Boolean
TRUE
该列是否可见
cardVisible
data-card-visible
Boolean
TRUE
在card视图里是否可见
switchable
data-switchable
Boolean
TRUE
False to disable the switchable of columns item.
clickToSelect
data-click-to-select
Boolean
TRUE
是否选中checkbox或者radio，当该列被选择时
formatter
data-formatter
Function
undefined
格式化单元格内容，function(value, row, index), value：该cell本来的值，row：该行数据，index：该行序号(从0开始)
footerFormatter
data-footer-formatter
Function
undefined
格式化footer内容，function(rows)，rows：所有行数据
events
data-events
Object
undefined
The cell 的事件监听，当你使用formatter function的时候,有三个参数:
event: the jQuery event.
value: 该cell的值
row: 该行的数据
index: 该行的序号
sorter
data-sorter
Function
undefined
自定义字段排序函数，function(a, b)
sortName
data-sort-name
String
undefined
当列中有html等标签时，只排序实际内容(忽略标签和样式)，例如字段为："abc"，则sortName=abc
cellStyle
data-cell-style
Function
undefined
单元格样式，支持css和classes，function(value, row, index)
value: 该cell的值
row: 该行的数据
index: 该行的序号
searchable
data-searchable
Boolean
TRUE
搜索时是否搜索此列
searchFormatter
data-search-formatter
Boolean
TRUE
搜索是否使用格式化后的数据(即显示在页面上的数据)
事件
Option 事件
jQuery 事件
参数
描述
onAll
all.bs.table
name, args
所有的事件都会触发该事件，参数包括：
name：事件名，
args：事件的参数。
onClickRow
click-row.bs.table
row, $element
当用户点击某一行的时候触发，参数包括：
row：点击行的数据，
$element：tr 元素。
onDblClickRow
dbl-click-row.bs.table
row, $element
当用户双击某一行的时候触发，参数包括：
row：点击行的数据，
$element：tr 元素。
onClickCell
click-cell.bs.table
field, value, row, $element
当用户点击某一列的时候触发，参数包括：
field：点击列的 field 名称，
value：点击列的 value 值，
row：点击列的整行数据，
$element：td 元素。
onDblClickCell
dbl-click-cell.bs.table
field, value, row, $element
当用户双击某一列的时候触发，参数包括：
field：点击列的 field 名称，
value：点击列的 value 值，
row：点击列的整行数据，
$element：td 元素。
onSort
sort.bs.table
name, order
Fires when user sort a column, the parameters contains:
name: the sort column field name
order: the sort column order.
onCheck
check.bs.table
row
Fires when user check a row, the parameters contains:
row: the record corresponding to the clicked row. $element: the DOM element checked.
onUncheck
uncheck.bs.table
row
Fires when user uncheck a row, the parameters contains:
row: the record corresponding to the clicked row. $element: the DOM element unchecked.
onCheckAll
check-all.bs.table
rows
Fires when user check all rows, the parameters contains:
rows: array of records corresponding to newly checked rows.
onUncheckAll
uncheck-all.bs.table
rows
Fires when user uncheck all rows, the parameters contains:
rows: array of records corresponding to previously checked rows.
onCheckSome
check-some.bs.table
rows
Fires when user check some rows, the parameters contains:
rows: array of records corresponding to previously checked rows.
onUncheckSome
uncheck-some.bs.table
rows
Fires when user uncheck some rows, the parameters contains:
rows: array of records corresponding to previously checked rows.
onLoadSuccess
load-success.bs.table
data
Fires when remote data is loaded successfully.
onLoadError
load-error.bs.table
status
Fires when some errors occur to load remote data.
onColumnSwitch
column-switch.bs.table
field, checked
Fires when switch the column visible.
onColumnSearch
column-search.bs.table
field, text
Fires when search by column.
onPageChange
page-change.bs.table
number, size
Fires when change the page number or page size.
onSearch
search.bs.table
text
Fires when search the table.
onToggle
toggle.bs.table
cardView
Fires when toggle the view of table.
onPreBody
pre-body.bs.table
data
Fires before the table body is rendered
onPostBody
post-body.bs.table
none
Fires after the table body is rendered and available in the DOM
onPostHeader
post-header.bs.table
none
Fires after the table header is rendered and availble in the DOM
onExpandRow
expand-row.bs.table
index, row, $detail
当点击详细图标展开详细页面的时候触发。
onCollapseRow
collapse-row.bs.table
index, row
当点击详细图片收起详细页面的时候触发。
onRefreshOptions
refresh-options.bs.table
options
Fires after refresh the options and before destroy and init the table
方法
使用方法的语法：$('#table').bootstrapTable('method', parameter);。
名称
参数
描述
getOptions
none
返回表格的 Options。
getSelections
none
返回所选的行，当没有选择任何行的时候返回一个空数组。
getAllSelections
none
返回所有选择的行，包括搜索过滤前的，当没有选择任何行的时候返回一个空数组。
getData
useCurrentPage
获得当前加载的数据。假如设置 useCurrentPage 为 true，则返回当前页的数据。
getRowByUniqueId
id
根据 uniqueId 获取行数据。
load
data
加载数据到表格中，旧数据会被替换。
append
data
添加数据到表格在现有数据之后。
prepend
data
插入数据到表格在现有数据之前。
remove
params
从表格中删除数据，包括两个参数： field: 需要删除的行的 field 名称。
values: 需要删除的行的值，类型为数组。
removeAll
-
删除表格所有数据。
removeByUniqueId
id
根据 uniqueId 删除指定的行。
insertRow
params
插入新行，参数包括：
index: 要插入的行的 index。
row: 行的数据，Object 对象。
updateRow
params
更新指定的行，参数包括：
index: 要更新的行的 index。
row: 行的数据，Object 对象。
showRow
params
显示指定的行，参数包括：
index: 要显示的行的 index 或者 uniqueId。
isIdField: 指定 index 是否为 uniqueid。
hideRow
params
隐藏指定的行，参数包括：
index: 要隐藏的行的 index。
uniqueId: 获取要更新的行的 uniqueid
getRowsHidden
show
获得所有隐藏的行
mergeCells
options
合并一些单元格到另一个单元格，options包含：
index：行序号
field：字段名
rowspan：合并的行数
colspan：合并的列数
updateCell
params
更新单元格的值
index: 行序号
field: 字段名
value: 值
refresh
params
刷新远程数据， {silent: true} 刷新客户端数据，{url: newUrl}根据newUrl刷新数据，还支持设置参数哦{query: {foo: 'bar'}}
refreshOptions
options
刷新options
showLoading
none
显示loading
hideLoading
none
隐藏loading
checkAll
none
选中当前页的所有行
uncheckAll
none
取消选中当前页的所有行
check
index
选中一行，行序号从0开始
uncheck
index
取消选中一行，行序号从0开始
checkBy
params
枚举搜索行
$("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]})
搜索字段名为field_name的列中，value是value1或者value2或者value3的行
uncheckBy
params
与checkBy相反
resetView
params
重置表格视图的属性，比如：height等
resetWidth
none
自动重置header和footer以适应当前的列宽
destroy
none
销毁当前表格
showColumn
field
显示指定的列
hideColumn
field
隐藏指定的列
getHiddenColumns
-
获取隐藏的列。
scrollTo
value
滚动到指定位置，单位为 px，设置 'bottom' 表示跳到最后。
getScrollPosition
none
获取当前滚动条的位置，单位为 px。
filterBy
params
(只能用于 client 端)过滤表格数据， 你可以通过过滤{age: 10}来显示 age 等于 10 的数据。
selectPage
page
跳到指定的页。
prevPage
none
跳到上一页。
nextPage
none
跳到下一页。
togglePagination
none
切换分页选项。
toggleView
none
切换 card/table 视图
expandRow
index
扩展的行索引参数如果通过细节视图选项设置为True
collapseRow
index
瓦解的行索引参数如果通过细节视图选项设置为True
expandAllRows
is subtable
扩展所有行如果细节视图选项设置为True
collapseAllRows
is subtable
瓦解所有行如果细节视图选项设置为True
多语言
Name
Parameter
Default
说明
formatLoadingMessage
-
'Loading, please wait…'
loading时显示的text
formatRecordsPerPage
pageNumber
'%s records per page'
每页显示数text
formatShowingRows
pageFrom, pageTo, totalRows
'Showing %s to %s of %s rows'
现在显示的是1to 10条记录text
formatDetailPagination
totalRows
'Showing %s rows'
总行数text
formatSearch
-
'Search'
搜索框提示text
formatNoMatches
-
'No matching records found'
搜索无结果text
formatRefresh
-
'Refresh'
刷新按钮title
formatToggle
-
'Toggle'
转换视图按钮title
formatColumns
-
'Columns'
是否显示列按钮title
formatAllRows
-
'All'
显示所有行按钮title
当然。。。还可以直接导入语言包
…
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['en-US']);
// $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
// ...