bootstrapTable参数及事件详解表的各项(Table options )
定义在 jQuery.fn.bootstrapTable.defaults ⽂件内
名称属性类型默认值作⽤描述
-data-
toggle
String table
只要引⼊ jquery、bootstrap 、bootstrap-table的包，不⽤在js⾥⾯定
义就可以使⽤
默认有写data-toggle=”table”,data-toggle应该知道吧，常⽤的
有”tooltip、popover等等”，这边就不说了
classes data-
classes
String table table-hover
表的class属性，如果没有⾃⼰定义，则默认有边框，并且当⿏标悬浮在那
⼀⾏，背景会变为浅灰⾊.
sortClass data-sort-
class
String undefined声明表格td的class名，代表此列元素的class名将被排序
height data-
height
Number undefined表格的⾼度
undefinedText data-
undefined-
text
String-当不写任何内容默认显⽰’-‘
striped data-
striped
Boolean false默认false，当设为true，则每⾏表格的背景会显⽰灰⽩相间
sortName data-sort-
name
String undefined
定义哪⼀列的值会被排序，写data-field的⾃定义名，没定义默认都不排
列，如果你定义了，则定义的列默认递增（asc）
sortOrder data-sort-
order
String asc同上⾯的结合使⽤，默认递增（asc），也可设为递减（desc）
sortStable data-sort-
stable
Boolean false
（别看错了，是sortStable，sortable在下⾯）默认false，设为true，则
和sort部分⼀样，区别是：在排序过程中，如果存在相等的元素，则原来
的顺序不会改变。原⽂还有⼀句：（如果你把此属性设为了true）我们将
为此⾏添加’_position’属性
iconsPrefix data-icons-
prefix
String glyphicon
定义字体库 (‘Glyphicon’ or ‘fa’ for FontAwesome)，使
⽤”fa”时需引⽤ FontAwesome，并且配合 icons 属性实现效果
Glyphicon 集成于Bootstrap可免费使⽤
iconSize data-icon-
size
String undefined
定义的图标⼤⼩：
- undefined =>默认表⽰默认的按钮尺⼨（btn）
- xs =>超⼩按钮的尺⼨（btn-xs）
-
sm =>⼩按钮的尺⼨（btn-sm）
- lg =>⼤按钮的尺⼨（btn-lg）
buttonsClass data-
buttons-
class
String default
按钮的类，默认为default。
- 可选的有：primary、danger、warning等等
- 写了之后会⾃动转换为btn-primary（蓝⾊）、btn-danger（红
⾊）、btn-warning（黄⾊）等格式，所以前⾯不要再加”btn-“，默认
为btn-default（⽩⾊）
-
参考菜鸟教程：
{
paginationSwitchDown:
‘glyphicon-collapse-
down icon-chevron-
down’,
paginationSwitchUp:
‘glyphicon-collapse-
up icon-chevron-up’,
icons data-icons Object 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[]默认空数组，在JS⾥⾯定义，field即data-field，title就是每列表头名等等。
- 请参考：
data-Array[]被加载的数据。
- 也就是从服务器获取的数据，通过”.”运算符获取，例如”data.date/data.anything”，后⾯是服务器发来的字段名
dataField data-data-
field
String rows
- 名称写⾃⼰定义的每列的字段名，也就是key，通过key才能给某⾏
的某列赋value。
- 原⽂：获取每⾏数据json内的key
- 例如：{“name”:”zz”,”age”:20}，name和age就是key，如
果这是从服务端请求的json，那可能和每列定义的字段不同，但都是唯⼀
的
ajax data-ajax Function undefined - ajax⽅法，和jQuery的ajax⽅法类似
- 参考 ，只是参考，因为那是jQuery的ajax⽅法
method data-
method
String get向服务器请求远程数据的⽅式，默认为’get’，可选’post’
url data-url String undefined 向服务器请求的url。
-
例如：server + “get_app_player”和server +
‘get_channel_list’，两者都是向server（server是⾃⼰定义的，例如”kanshakan.nichousha/”）请求数据，只是接⼝不同，⼀个是请求该游戏玩家信息，⼀个是请求渠道信息
下⾯看看原⽂：
- 向远程站点请求数据的URL
- 请记住，如果服务端分页选项使⽤了⾃定义的，那么请求的服务器响应格式是不同的，参考下⾯两个数据格式：
cache data-cache Boolean true默认缓存ajax请求，设为false则禁⽤缓存
contentType data-
content-
type
String application/json
请求数据的contentType（内容类型），⽤于定义⽂件的类型，决定接收
⽅以什么形式读取这个⽂件。
- 默认application/json，⽤来告诉接收端从服务器发来的消息是序列
化后的json字符串
dataType data-data-
type String json期望从服务器获取的数据的类型，默认为json格式字符串
ajaxOptions data-ajax-
options
Object{}
向服务器请求ajax时的附加项，默认⽆附加
-
参考
queryParams data-
query-
params
Function
当请求数据时，你可以通过修改queryParams向服务器发送其余的参数。
- queryParamsType=”limit”，它的参数包括：
limit，offset，search，sort，order Else
- params包括：
pageSize，pageNumber，searchText，sortName，sortOrder
- 当return false，请求则终⽌
function(params){
return params;}
queryParamsType data-
query-
params-
type
String limit默认”limit”，设置该属性⽤来发送符合RESTful格式的参数
responseHandler data-
response-
handler
Function
在加载服务器发送来的数据之前，处理数据的格式，参数res表⽰the
response data（获取的数据）
pagination data-
pagination
Boolean false
默认为false，表格的底部⼯具栏不会显⽰分页条（pagination
toolbar），可以设为true来显⽰
paginationLoop data-
pagination-
loop
Boolean true默认true，分页条⽆限循环
onlyInfoPagination data-only-
info-
pagination
Boolean false
前提：pagination设为true，启⽤了分页功能。
- 默认false，设为true显⽰总记录数
sidePagination data-side-
pagination
String client
设置在哪进⾏分页，默认”client”，可选”server”，如果设置
“server”，则必须设置url或者重写ajax⽅法
-
请记住，如果服务端分页选项使⽤了⾃定义的，那么请求的服务器响
应格式是不同的，参考下⾯两个数据格式：
pageNumber data-page-
number
Number1
前提：pagination设为true，启⽤了分页功能。
- 默认第1页，⽤于设置初始的页数
pageSize data-page-
js获取json的key和valuesize
Number10
前提：pagination设为true，启⽤了分页功能。
-
默认每页显⽰10条记录，⽤于设置每页初始显⽰的条数
pageList data-page-
list
Array[10, 25, 50, 100]
前提：pagination设为true，启⽤了分页功能。
- 默认为[10, 25, 50, 100]，即可以选择”每页显⽰10/25/50/100
条记录”，⽤于设置选择每页显⽰的条数
selectItemName data-
select-
item-name
String btSelectItem radio（单选按钮）或checkbox（复选框）的字段名
smartDisplay data-
smart-
display
Boolean true
默认为true，会 机智地（<_<） 根据情况显⽰分页（pagination）或卡⽚
视图（card view）
escape data-
escape
Boolean false
跳过插⼊HTML中的字符串，替换掉特殊字符（后⾯符号没有逗号）：
&，<，>，"，`，'
search data-
search
Boolean false
默认false不显⽰表格右上⽅搜索框 ，可设为true，在搜索框内只要输⼊内
容即开始搜索
searchOnEnterKey data-
search-on-
enter-key
Boolean false
默认false不启⽤，设为true启⽤，⽐功能是与上⾯相⽐，在搜索框内输⼊
内容并且按下回车键才开始搜索
strictSearch data-strict-
search
Boolean false设为true，开启精确搜索
searchText data-
search-
text
String“”
前提：search设为true，启⽤了搜索功能。
- 搜索框初始显⽰的内容，默认空字符串
searchTimeOut data-
search-
time-out
Number500
前提：search设为true，启⽤了搜索功能。
- 设置搜索⽂件的超时时间（原⽂：Set timeout for search fire，
不知道是写错了还是我知识⾯太窄，”search fire”是什么意思，官⽅
API错了？给我整蒙逼了）
trimOnSearch data-trim-
Boolean true默认true，⾃动忽略空格
function(res){
return res;}
trimOnSearch
on-search
Boolean true默认true，⾃动忽略空格
showHeader data-show-
header
Boolean true默认为true显⽰表头，设为false隐藏
showFooter data-show-
footer
Boolean false默认为false隐藏表尾，设为true显⽰
showColumns data-show-
columns
Boolean false默认为false隐藏某列下拉菜单，设为true显⽰
showRefresh data-show-
refresh
Boolean false默认为false隐藏刷新按钮，设为true显⽰
showToggle data-show-
toggle
Boolean false默认为false隐藏视图切换按钮，设为true显⽰
新版的CSDN有bug，所以其余的Table options另写⼀个表格 [ BootstrapTable ⽂档 ]名称属性类型默认值作⽤描述
showPaginationSwitch data-show-
pagination-
switch
Boolean false默认为false隐藏每页数据条数选择，设为true显⽰
minimumCountColumns data-
minimum-
count-
columns
Number1每列的下拉菜单最⼩数
idField data-id-field String undefined表明哪个是字段是标识字段
uniqueId data-
unique-id
String undefined表明每⾏唯 ⼀的标识符
cardView data-card-
view
Boolean false默认false，设为true显⽰card view（卡⽚视图）
detailView data-card-
view
Boolean false默认false，设为true显⽰detail view（细节视图）
detailFormatter data-detail-
formatter Function
function(index,
row, element){
return ”;}
前提：detailView设为true，启⽤了显⽰detail view。
- ⽤于格式化细节视图
-
返回⼀个字符串，通过第三个参数element直接添加到细节视图的
cell（某⼀格）中，其中，element为⽬标cell的jQuery element
searchAlign data-
search-
align
String right搜索框的位置，默认right（最右），可选left
buttonsAlign data-
buttons-
align
String right⼯具栏按钮的位置，默认right（最右），可选left
toolbarAlign data-
toolbar-
align
String left⾃定义⼯具栏的位置，默认right（最右），可选left
paginationVAlign data-
pagination-
v-align
String bottom
分页条垂直⽅向的位置，默认bottom（底部），可选top、both（顶部和底
部均有分页条）
paginationHAlign data-
pagination-
h-align
String right分页条⽔平⽅向的位置，默认right（最右），可选left data-
paginationDetailHAlign data-
pagination-
detail-h-
align
String left
如果解译的话太长，举个例⼦，paginationDetail就是“显⽰第 1 到第 8 条
记录，总共 15 条记录 每页显⽰ 8 条记录”，默认left（最左），可选right
paginationPreText data-
pagination-
pre-text
String‹
还是举例⼦，如果你内容太多，底部最右边会显⽰：”‹ 1 2 3 4 5 ›”来选择
页数，默认就是最左边那个符号，下同
paginationNextText data-
pagination-
next-text
String›参考上⾯⼀条
clickToSelect data-click-
to-select
Boolean false
默认false不响应，设为true则当点击此⾏的某处时，会⾃动选中此⾏的
checkbox（复选框）或radiobox（单选按钮）
singleSelect data-single-
select
Boolean false默认false，设为true则允许复选框仅选择⼀⾏
toolbar data-
toolbar
String |
Node
undefined jQuery的选择器，例如：#toolbar，.toolbar，或者是DOM 结点
checkboxHeader data-
checkbox-
header
Boolean true
如果你有声明复选框，默认显⽰表头⾏的全选复选框，设为false隐藏（就是
表格第⼀⾏的不显⽰，从第⼆⾏往后都显⽰）
maintainSelected data-
maintain-
selected
Boolean false设为true则保持被选的那⼀⾏的状态
sortable data-
sortable
Boolean true
默认true，设为false禁⽤所有的⾏排列（也就是每列表头不会显⽰排序的按
钮，这个需要在th声明data-sortable=”true”，写在js中只是启不启⽤）
slientSort data-silent-
sort
Boolean true
前提：sidePagination设为server（服务端）
- 默认true，设为false则静默排序数据
rowStyle
data-row-
style Function{}
改变某⾏的格式，需要两个参数：
- row：此⾏的数据
- index：此⾏的索引
⽀持classes和css，⽤法如下： function rowStyle(row, index){
return { classes: ‘text-nowrap another-class’,
css: {“color”: “blue”, “font-size”: “50px”}
}; }
rowAttributes data-row-
attributes
Function{}
改变某⾏的属性，需要两个参数：
-
row：此⾏的数据
- index：此⾏的索引
⽀持所有⾃定义的属性。
customSearch data-
custom-
search
Function$.noop
⾃定义搜索功能（⽤来代替⾃带的搜索功能），需要⼀个参数：
- text：想要搜索的内容
⽤法如下：
function customSearch(text){
/
/必须使⽤’this.data’对数据进⾏过滤（filter the data，感觉这个词
也不⽤译），不要使⽤’this.options.data’ }
customSort data-
custom-
sort
Function$.noop
⾃定义排序功能（⽤来代替⾃带的排序功能），需要两个参数（可以参考前
⾯）：
- sortName：需要排序的那列
- sortOrder：排序⽅式
⽤法：和上⾯⼀样，不⽤担⼼，注释也⼀模⼀样
locale data-locale String undefined 本地化（动词）。
本地化的⽂件必须被预加载，允许fallback（简单来说就是如果要使⽤的⽂件不可⽤，就可以⽤别的替代它，例如球场替补，没替补，如果有⼈受伤了，⽐赛不就废了），如果加载，将按如下顺序：
- ⾸先尝试加载的是指定的”本地化”⽂件
- 然后是’_’（下划线）写成’-‘（破折号），并且区域代码被⼤写的 - 然后是短区域代码（例如：⽤’fr’代替’fr-CA’）
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论