bootstraptable表格属性、列属性、事件、⽅法留存⼀份，原⽂地址bootstrap-table.wenzhixin/zh-cn/documentation/
表格参数
表格的参数定义在jQuery.fn.bootstrapTable.defaults。
名称标签类型默认描述
-data-toggle String'table'不⽤写 JavaScript 直接启⽤表格。
classes data-
classes
String'table table-hover'表格的类名称。默认情况下，表格是有边框的，你可以添加 'table-no-
bordered' 来删除表格的边框样式。
sortClass data-sort-
class
String undefined被排序的td元素的类名。
height data-height Number undefined定义表格的⾼度。
undefinedText data-
undefined-
text
String'-'当数据为 undefined 时显⽰的字符。
striped data-
striped
Boolean false设置为true会有隔⾏变⾊效果。
sortName data-sort-
name
String undefined定义排序列，通过url⽅式获取数据填写字段名，否则填写下标。
sortOrder data-sort-
order
String'asc'定义排序⽅式，'asc' 或者 'desc'。
sortStable data-sort-
stable
Boolean false设置为true将获得稳定的排序，我们会添加\_position属性到 row 数据中。
iconsPrefix data-icons-
prefix
String'glyphicon'
定义字体库 ('Glyphicon' or 'fa' for FontAwesome)，使⽤"fa"时需引⽤
FontAwesome，并且配合 icons 属性实现效果。
Glyphicon 集成于Bootstrap可免费使⽤，参考：
FontAwesome 参考：
icons data-icons Object {
paginationSwitchDown:
'glyphicon-collapse-
down icon-chevron-
down',
paginationSwitchUp:
'glyphicon-collapse-up
icon-chevron-up',
refresh: 'glyphicon-
refresh icon-refresh'
toggle: 'glyphicon-list-
alt icon-list-alt'
columns: 'glyphicon-th
icon-th'
detailOpen: 'glyphicon-
plus icon-plus'
detailClose: 'glyphicon-
minus icon-minus'
}
⾃定义图标
columns-Array[]列配置项，详情请查看列参数表格.
data-Array[]加载json格式的数据。
ajax data-ajax Function undefined⾃定义 AJAX ⽅法，须实现 jQuery AJAX API。
method data-
method
String'get'服务器数据的请求⽅式 'get' 或 'post'。
url data-url String undefined服务器数据的加载地址。
cache data-cache Boolean true设置为false禁⽤ 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;
}
请求服务器数据时，你可以通过重写参数的⽅式添加⼀些额外的参数，例如toolbar 中的参数 如果 queryParamsType = 'limit' ，返回参数必须包含limit, offset, search, sort, order 否则, 需要包含: pageSize, pageNumber, searchText, sortName, sortOrder. 返回false 将会终⽌请求。queryParamsType data-
query-
params-type
String 'limit'
设置为 'limit' 则会发送符合 RESTFul 格式的参数。responseHandler data-response-handler Function function(res) {
return res;
}
加载服务器数据之前的处理程序，可以⽤来格式化数据。参数：res 为从服务器请求到的数据。pagination data-
pagination Boolean false
设置为 true 会在表格底部显⽰分页条。paginationLoop data-
pagination-loop
Boolean true
设置为 true 启⽤分页条⽆限循环的功能。onlyInfoPagination data-only-
info-pagination
Boolean false
设置为 true 只显⽰总数据数，⽽不显⽰分页按钮。需要设置pagination='true'。sidePagination data-side-
pagination String 'client'
设置在哪⾥进⾏分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置服务器数据地址（url ）或者重写ajax ⽅法。pageNumber data-page-
number Number 1
如果设置了分页，⾸页页码。pageSize data-page-
size Number 10
如果设置了分页，页⾯数据条数。pageList data-page-
list Array [10, 25, 50, 100, All]
如果设置了分页，设置可供选择的页⾯数据条数。设置为 All 或者Unlimited ，则显⽰所有记录。selectItemName data-
select-item-name
String 'btSelectItem'
radio 或者 checkbox 的字段 name 名。smartDisplay data-smart-
display Boolean true
设置为 true 是程序⾃动判断显⽰分页信息和 card 视图。escape data-
escape Boolean false
转义HTML 字符串，替换 &, <, >, ", \`, 和 ' 字符。search data-
search Boolean false
是否启⽤搜索框。searchOnEnterKey data-
search-on-enter-key
Boolean false
设置为 true 时，按回车触发搜索⽅法，否则⾃动触发搜索⽅法。strictSearch data-strict-
search Boolean false
设置为 true 启⽤全匹配搜索，否则为模糊搜索。searchText data-
search-text String ''
初始化搜索⽂字。searchTimeOut data-
search-time-out
Number 500
设置搜索超时时间。trimOnSearch data-trim-on-search
Boolean true
设置为 true 将⾃动去掉搜索字符的前后空格。showHeader data-show-
header Boolean true
是否显⽰列头。showFooter data-show-
footer Boolean false
是否显⽰列脚。showColumns data-show-
columns Boolean false
是否显⽰内容列下拉框。showRefresh data-show-
refresh Boolean false
是否显⽰刷新按钮。showToggle data-show-
toggle Boolean false
是否显⽰切换视图（table/card ）按钮。showPaginationSwitch data-show-
pagination-switch
Boolean false
是否显⽰切换分页按钮。showFullscreen data-show-
fullscreen Boolean false
是否显⽰全屏按钮。minimumCountColumns data-
minimum-
count-columns Number 1
最⼩隐藏列的数量。
名称标签类型默认
描述
idField data-id-
field
String undefined指定主键列。
uniqueId data-
unique-id
String undefined对每⼀⾏指定唯⼀标识符。
cardView data-card-
view
Boolean false设置为true将显⽰card视图，适⽤于移动设备。否则为table试图，适⽤于pc
端。
detailView data-detail-
view
Boolean false设置为true可以显⽰详细页⾯模式。
detailFormatter data-detail-
formatter
Function
function(index, row) {
return '';
}
格式化详细页⾯模式的视图。
searchAlign data-
search-
align
String'right'指定搜索框⽔平⽅向的位置。'left' 或 'right'。
buttonsAlign data-
buttons-
jquery是什么选择器align
String'right'指定按钮栏⽔平⽅向的位置。'left' 或 'right'。
toolbarAlign data-
toolbar-
align
String'left'指定 toolbar ⽔平⽅向的位置。'left' 或 'right'。
paginationVAlign data-
pagination-
v-align
String'bottom'指定分页条在垂直⽅向的位置。'top'，'bottom' 或 'both'。
paginationHAlign data-
pagination-
h-align
String'right'指定分页条在⽔平⽅向的位置。'left' 或 'right'。
paginationDetailHAlign data-
pagination-
detail-h-
align
String'left'指定分页详细信息在⽔平⽅向的位置。'left' 或 'right'。
paginationPreText data-
pagination-
pre-text
String'<'指定分页条中上⼀页按钮的图标或⽂字。
paginationNextText data-
pagination-
next-text
String'>'指定分页条中下⼀页按钮的图标或⽂字。
clickToSelect data-click-
to-select
Boolean false设置 true 将在点击⾏时，⾃动选择 rediobox 和 checkbox。
ignoreClickToSelectOn data-
ignore-
click-to-
select-on
Function
{ return
$.inArray(element.tagName,
['A', 'BUTTON']); }
包含⼀个参数：
element: 点击的元素。
返回 true 是点击事件会被忽略，返回 false 将会⾃动选中。该选项只有在
clickToSelect 为 true 时才⽣效。
singleSelect data-
single-
select
Boolean false设置 true 将禁⽌多选。
toolbar data-
toolbar
String undefined⼀个jQuery 选择器，指明⾃定义的 toolbar。例如:
#toolbar, .toolbar.
buttonsToolbar data-
buttons-
toolbar
String |
Node
undefined⼀个jQuery 选择器，指明⾃定义的 buttons toolbar。例如:
#buttons-toolbar, .buttons-toolbar 或 DOM 节点。
checkboxHeader data-
checkbox-
header
Boolean true设置 false 将在列头隐藏全选复选框。
maintainSelected data-
maintain-
selected
Boolean false设置为true在点击分页按钮或搜索按钮时，将记住checkbox的选择项。
sortable data-
sortable
Boolean true设置为false将禁⽌所有列的排序。
silentSort data-silent-
sort
Boolean true设置为false将在点击分页按钮时，⾃动记住排序项。仅在 sidePagination设
置为server时⽣效。
rowStyle data-row-
style
Function
function(row,index) {
return class;
}
⾃定义⾏样式参数为：
row: ⾏数据
index: ⾏下标
返回值可以为class或者css
rowAttributes data-row-
attributes
Function
function(row,index) {
return attributes;
}
⾃定义⾏属性参数为：
row: ⾏数据
index: ⾏下标
返回值可以为class或者css ⽀持所有⾃定义属性
名称标签类型默认描述
返回值可以为class或者css ⽀持所有⾃定义属性
customSearch data-
custom-
search
Function$.noop
⾃定义搜索⽅法来替代内置的搜索功能，它包含⼀个参数：
text：搜索⽂字。
⽤法⽰例：
function customSearch(text) {
//Search logic here.
/
/You must use `this.data` array in order to filter the data. NO use `this.options.data`.
}
customSort data-
custom-
sort
Function$.noop
⾃定义排序⽅法来替代内置的搜索功能，它包含⼀个参数：
sortName: 排序名。
sortOrder: 排序顺序。
⽤法⽰例：
function customSort(sortName, sortOrder) {
/
/Sort logic here.
//You must use `this.data` array in order to sort the data. NO use `this.options.data`.
}
名称标签类型默认描述
列参数
The column options is defined in jQuery.lumnDefaults.
Name Attribute Type Default Description radio data-radio Boolean false True to show a radio. The radio column has fixed width.
checkbox data-
checkbox
Boolean false True to show a checkbox. The checkbox column has fixed width.
field data-field String undefined The column field name. title data-title String undefined The column title text.
titleTooltip data-title-
tooltip
String undefined The column title tooltip text. This option also support the title HTML attribute
class class /
data-class
String undefined The column class name.
rowspan rowspan /
data-
rowspan
Number undefined Indicate how many rows a cell should take up.
colspan colspan /
data-
colspan
Number undefined Indicate how many columns a cell should take up.
align data-align String undefined Indicate how to align the column data. 'left', 'right', 'center' can be used.
halign data-
halign
String undefined Indicate how to align the table header. 'left', 'right', 'center' can be used.
falign data-falign String undefined Indicate how to align the table footer. 'left', 'right', 'center' can be used. valign data-valign String undefined Indicate how to align the cell data. 'top', 'middle', 'bottom' can be used.
width data-width Number
{Pixels or
Percentage}
undefined
The width of column. If not defined, the width will auto expand to fit its contents. Also you can
add '%' to your number and the bootstrapTable will use the percentage unit, otherwise, you can
add or no the 'px' to your number and then the bootstrapTable will use the pixels
sortable data-
sortable
Boolean false True to allow the column can be sorted.
order data-order String'asc'The default sort order, can only be 'asc' or 'desc'.
visible data-
visible
Boolean true False to hide the columns item.
cardVisible data-card-
visible
Boolean true False to hide the columns item in card view state.
switchable data-
switchable
Boolean true False to disable the switchable of columns item.
clickToSelect data-click-
to-select
Boolean true True to select checkbox or radiobox when the column is clicked.
formatter data-
formatter
Function undefined
The context (this) is the column Object.
The cell formatter function, take three parameters:
value: the field value.
row: the row record data.
index: the row index.
footerFormatter data-
footer-
formatter
Function undefined
The context (this) is the column Object.
The function, take one parameter:
data: Array of all the data rows.
the function should return a string with the text to show in the footer cell.
events data-
events
Object undefined
The cell events listener when you use formatter function, take three parameters:
event: the jQuery event.
value: the field value.
row: the row record data.
index: the row index.
sorter data-sorter Function undefined The custom field sort function that used to do local sorting, take two parameters: a: the first field value.
b: the second field value.
rowA: the first row.
rowB: the second row.
sortName data-sort-
name
String undefined
Provide a customizable sort-name, not the default sort-name in the header, or the field name of
the column. For example, a column might display the value of fieldName of "html" such as "<b>
<span >abc</span></b>", but a fieldName to sort is "content" with the value of "abc".
cellStyle data-cell-
style
Function undefined
The cell style formatter function, take three parameters:
value: the field value.
row: the row record data.
index: the row index.
field: the row field.
Support classes or css.
searchable data-
searchable Boolean true True to search data for this column.
searchFormatter data-
search-
formatter
Boolean true True to search use formated data.
escape data-
escape
Boolean false Escapes a string for insertion into HTML, replacing &, <, >, ", \`, and ' characters.
showSelectTitle data-show-
select-title
Boolean false True to show the title of column with 'radio' or 'singleSelect' 'checkbox' option.
Name Attribute Type Default Description
事件
Option 事件jQuery 事件参数描述
onAll all.bs.table name, args 所有的事件都会触发该事件，参数包括：name：事件名，
args：事件的参数。
onClickRow click-row.bs.table row, $element 当⽤户点击某⼀⾏的时候触发，参数包括：row：点击⾏的数据，
$element：tr 元素，
field：点击列的 field 名称。
onDblClickRow dbl-click-row.bs.table row, $element 当⽤户双击某⼀⾏的时候触发，参数包括：row：点击⾏的数据，
$element：tr 元素，
field：点击列的 field 名称。
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 当⽤户对某列进⾏排序时触发，参数包括：name：排序列的 filed 名称，
order：排序顺序。
onCheck check.bs.table row 当⽤户选择某⼀⾏时触发，参数包含： row：与点击⾏对应的记录，
$element：选择的DOM元素。
onUncheck uncheck.bs.table row 当⽤户反选某⼀⾏时触发，参数包含：row：与点击⾏对应的记录，
$element：选择的DOM元素。
onCheckAll check-all.bs.table rows当⽤户全选所有的⾏时触发，参数包含：
rows：最新选择的所有⾏的数组。
onUncheckAll uncheck-all.bs.table rows当⽤户反选所有的⾏时触发，参数包含：
rows：最新选择的所有⾏的数组。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论