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']);

// ...