BootstrapTable中⽂⽂档(完整翻译版)表格参数:
名称标签类型默认描述
-data-toggle String‘table’不⽤写 JavaScript 直接启⽤表格。
classes data-
classes
String‘table table-hover’
表格的类名称。默认情况下,表格是有边框的,你可以添加
‘table-no-bordered’ 来删除表格的边框样式。
sortClass data-sort-
class
String undefined被排序的td标签的class名
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’ or ‘post’
url data-url String undefined服务器数据的加载地址
cache data-cache Boolean true设置为 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;
}
请求服务器数据时,你可以通过重写参数的⽅式添加⼀些额外
的参数,例如 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
Number1如果设置了分页,⾸页页码
pageSize data-page-
size
Number10如果设置了分页,页⾯数据条数
pageList data-page-
list
Array[10, 25, 50, 100, All]
如果设置了分页,设置可供选择的页⾯数据条数。设置为All
则显⽰所有记录。
selectItemName data-select-
item-name
String‘btSelectItem’radio or checkbox 的字段名
smartDisplay
data-smart-
display Boolean true
设置为 true可以在分页和卡⽚视图快速切换
escape data-
escape
Boolean false转义HTML字符串,替换 &, <, >, ", `, 和 '字符.
search data-search Boolean false是否启⽤搜索框
searchOnEnterKey data-
search-on-
enter-key
Boolean false设置为 true时,按回车触发搜索⽅法,否则⾃动触发搜索⽅法
strictSearch data-strict-
htmlradio添加切换事件search
Boolean false设置为 true启⽤ 全匹配搜索,否则为模糊搜索
名称标签类型默认描述
search
searchText data-
search-text
String”初始化搜索⽂字
searchTimeOut data-
search-
time-out
Number500设置搜索超时时间
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是否显⽰ 数据条数选择框
minimumCountColumns data-
minimum-
count-
columns
Number1当列数⼩于此值时,将隐藏内容列下拉框。
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’ or ‘right’
buttonsAlign data-
buttons-
align
String‘right’指定 按钮 ⽔平⽅向的位置。’left’ or ‘right’
toolbarAlign data-
toolbar-
align
String‘left’指定 toolbar ⽔平⽅向的位置。’left’ or ‘right’
paginationVAlign data-
pagination-
v-align
String‘bottom’
指定 分页条 在垂直⽅向的位置。’top’ or ‘bottom’
or ‘bonth’
paginationHAlign data-
pagination-
h-align
String‘right’指定 分页条 在⽔平⽅向的位置。’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设置true 将在点击⾏时,⾃动选择rediobox 和 checkbox
singleSelect data-single-
select
Boolean false设置True 将禁⽌多选
toolbar data-
toolbar
String undefined
⼀个jQuery 选择器,指明⾃定义的toolbar 例如:
#toolbar, .toolbar.
checkboxHeader data-
checkbox-
header
Boolean true设置false 将在列头隐藏check-all checkbox .
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 ⽀持所有⾃定义属性
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`.
}
名称标签类型默认描述
名称标签类型默认描述列参数:
名称标签类型默认描述
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列切换是否可见.
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
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论