目录

  • 一、方 法
  • 二、事 件


一、方 法

方法名

参数

描述

getOptions

none

获取表格的参数

getSelections

none

获取当前被选中的行

getAllSelections

none

获取当前被选中的行数据，包含搜索和过滤前的

showAllColumns

none

展示所有列

hideAllColumns

none

隐藏所有列

getData

useCurrentPage

获取当前表格中加载的数据，参数useCurrentPage为true 将返回当前页内的数据

getRowByUniqueId

id

根据唯一ID获取行数据

load

data

将新数据加载到表格中

append

data

将新数据追加到表格末尾

prepend

data

将新数据插入到表格头部

remove

params

从表格中移除列名为指定值的数据，包含2个参数 field: 列名 values: 列名取值数组

removeAll

-

移除表格中的所有数据

removeByUniqueId

id

根据唯一ID移除行数据

insertRow

params

插入多个新行到指定位置，每一行包含以下参数 index:要插入到行的索引 row: 要插入的行数据

updateRow

params

更新指定的行，每一行包含以下参数 index:要插入到行的索引 row: 要插入的行数据

updateByUniqueId

params

根据唯一ID更新行数据每一行包含以下参数 id: 唯一ID row: 新的行数据

showRow

params

显示指定行，至少需包含以下任意参数 index:行索引uniqueId:行唯一ID

hideRow

params

隐藏指定行，至少需包含以下任意参数 index:行索引

getHiddenRows

boolean

获取所有隐藏的行数据，当参数为 true 会将隐藏行进行显示

mergeCells

options

合并多个单元格，包含以下参数 index: 行索引 field: 列名称 rowspan: 合并多少行 colspan: 合并多少列

updateCell

params

更新一个单元格数据，包含以下参数 index: 行索引 field: 列名称 value: 新列值 禁止表格重新初始化需添加参数{reinit: false}

refresh

params

重新加载远程数据，可以设置 {silent: true}静默加载数据，同时设置 {url: newUrl, pageNumber: pageNumber, pageSize: pageSize} 改变数据请求地址和分页参数，请求参数通过 {query: {foo: ‘bar’}} 修改

refreshOptions

options

刷新表格的参数

resetSearch

text

设置搜索内容

showLoading

none

显示数据加载状态提示

hideLoading

none

隐藏数据加载状态提示

checkAll

none

选中当前页的所有行

uncheckAll

none

取消选中当前页的所有行

checkInvert

none

对当前页内行数据进行反选，会触发onCheckSome 和 onUncheckSome 事件

check

index

选中某一行，索引从0开始

uncheck

index

取消选中某一行，索引从0开始

checkBy

params

根据列名选则行数据 field: 列名称 values:列取值数组 $(“#table”).bootstrapTable(“checkBy”, {field:“field_name”, values:[“value1”,“value2”,“value3”]})

uncheckBy

params

根据列名取消选中行数据 field: 列名称 values:列取值数组 $(“#table”).bootstrapTable(“uncheckBy”, {field:“field_name”, values:[“value1”,“value2”,“value3”]})

resetView

params

重置表格视图

resetWidth

none

重新设置列头和列尾的宽度去适应当前列的宽度

destroy

none

销毁表格

showColumn

field

显示指定列

hideColumn

field

隐藏指定列

getHiddenColumns

-

获取隐藏的列

getVisibleColumns

-

获取可见的列

scrollTo

value

使滚动条滚动到指定位置，单位像素，‘bottom’ 滚动条滚动到底

getScrollPosition

none

获取当前滚动条的位置，单位像素

filterBy

params

在client模式下，对表格数据进行过滤，语法示例如下 {age: 10, hairColor: [“blue”, “red”, “green”]}

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时，收起所有行的详细视图

updateCellById

params

根据唯一ID更新指定单元格，包含以下参数 id: 唯一ID field: 要更新的列的列名称 value: 新值

⏹方法用法

// 刷新表格 tabledata 为数据
$("#table").bootstrapTable('load', [{'后端传入数据1'}, {'后端传入数据2'}]);
// 清空表格数据
$("#table").bootstrapTable('removeAll');　　
// 销毁表格数据
$('#table').bootstrapTable('destroy');     
// 刷新表格
$("#table").bootstrapTable('refresh') 　　
// 获取选中数据 
$("#table").bootstrapTable('getSelections');

二、事 件

事件名称

JQuery事件

参数

描述

onAll

all.bs.table

name, args

任何事件触发都会同时触发该事件, 包含2个参数 name: 事件名称 args: 事件参数

onClickRow

click-row.bs.table

row, $element, field

当点击某一行时触发，包含3个参数 row: 点击行的数据 $element: 对应的

onDblClickRow

dbl-click-row.bs.table

row, $element, field

当双击击某一行时触发，包含3个参数 row: 点击行的数据 $element: 对应的

onClickCell

click-cell.bs.table

field, value, row, $element

当点击某一个单元格时触发，包含4个参数 field: 所点击的单元格对应的列名称 value: 所点击的单元格对应列的值 row:单元格所在行数据 $element: 对应的元素

onDblClickCell

dbl-click-cell.bs.table

field, value, row, $element

当双击某一个单元格时触发，包含4个参数 field: 所点击的单元格对应的列名称 value: 所点击的单元格对应列的值 row:单元格所在行数据 $element: 对应的元素

onSort

sort.bs.table

name, order

当用户点击列头对某一列进行排序时触发，包含2个参数 name: 排序的列名称 order: 排序方式

onCheck

check.bs.table

row, $element

当用户选中一行时触发，包含2个参数 row: 所选中行的行数据 $element: 选中的元素

onUncheck

uncheck.bs.table

row, $element

当用户取消选中一行时触发，包含2个参数 row: 所取消选中的行数据 $element: 选中的元素

onCheckAll

check-all.bs.table

rows

当用户点击全选框时触发，包含1个参数 rows: 选中的行数据数组

onUncheckAll

uncheck-all.bs.table

rows

当用户点击全选框取消选择时触发，包含1个参数 rows: 取消选中的行数据数组

onCheckSome

check-some.bs.table

rows

当用户选中某些行时触发，包含1个参数 rows: 选中的行数据数组

onUncheckSome

uncheck-some.bs.table

rows

当用户取消选中某些行时触发，包含1个参数 rows: 取消选中的行数据数组

onLoadSuccess

load-success.bs.table

data

当远程数据被加载完成后触发

onLoadError

load-error.bs.table

status, res

当远程数据被加载出错后触发

onColumnSwitch

column-switch.bs.table

field, checked

当切换列的显示状态（可见或不可见）时触发

onColumnSearch

column-search.bs.table

field, text

对列内容进行搜索时触发

onPageChange

page-change.bs.table

number, size

当切换每页条数时触发

onSearch

search.bs.table

text

当对表格内容进行搜索时触发

onToggle

toggle.bs.table

cardView

当切换表格的显示视图时触发

onPreBody

pre-body.bs.table

data

在对表格体进行渲染前触发

onPostBody

post-body.bs.table

data

在表格体渲染完成，并在 DOM 中可见后触发

onPostHeader

post-header.bs.table

none

在表格列头渲染完成，并在 DOM 中可见后触发

onExpandRow

expand-row.bs.table

index, row, $detail

当点击详情按钮展开详情视图时触发

onCollapseRow

collapse-row.bs.table

index, row

当点击关闭详情按钮收起详情视图时触发

onRefreshOptions

refresh-options.bs.table

options

当刷新表格选项时，在销毁当前表格并重新初始化新表格之前触发

onResetView

reset-view.bs.table

当重置表格视图时触发

onRefresh

refresh.bs.table

params

当点击刷新按钮对表格进行刷新时触发

onScrollBody

scroll-body.bs.table

当对表格体进行滚动时触发

元素 field:所点击的单元格对应的列名称元素 field:所点击的单元格对应的列名称

⏹bootstrapTable事件

$('#table').bootstrapTable({
    onEventName1: function (arg1, arg2, ...) {　
    	// ......
	},
    onEventName2: function (arg1, arg2, ...) {
        // ......
    }
})

⏹JQuery事件

$('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) {　
    // ......
})