bootstraptable监听事件合集

onAll事件

监听所有事件

触发所有事件时触发，参数包含：

name: 事件名称；

args: 事件数据。

• 使用方法：

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

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

onClickRow事件

监听单击行事件

• jQuery 事件: click-row.bs.table
• 参数: row, $element, field
• 详情:

用户点击一行（table列表数据的一行）时触发，参数包含：

row: 与单击的行对应的记录。
$element: tr元素。
field:与单击的单元格对应的字段名称。

• 使用方法：

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

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

onDblClickRow事件

监听双击行事件

• jQuery 事件: dbl-click-row.bs.table
• 参数: row, $element, field
• 详情:

用户双击一行（table列表数据的一行）时触发，参数包含：

row: 与单击的行对应的记录。
$element: tr元素。
field: 与单击的单元格对应的字段名称。

• 使用方法：

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

$('#table').on('dbl-click-row.bs.table', function (e, arg1, arg2, ...) {
  // ...
})

onClickCell事件

监听单击单元格事件

• jQuery 事件: click-cell.bs.table
• 参数: field, value, row, $element
• 详情:

用户单击一个单元格时触发，参数包含：

field: 与单击的单元格对应的字段名称。
value: 与单击的单元格对应的数据值。
row: 与单击的行对应的记录。
$element: td元素。

• 使用方法：

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

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

onDblClickCell事件

监听双击单元格事件

• jQuery 事件: dbl-click-cell.bs.table
• 参数: field, value, row, $element
• 详情:

用户双击单元格时触发，参数包含：

field: 与单击的单元格对应的字段名称。
value: 与单击的单元格对应的数据值。
row: 与单击的行对应的记录。
$element:td元素。

• 使用方法：

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

$('#table').on('dbl-click-cell.bs.table', function (e, arg1, arg2, ...) {
  // ...
})

onSort事件

监听排序操作事件

• jQuery 事件: sort.bs.table
• 参数: name, order
• 详情:

用户对列进行排序时触发，参数包含：

name: 排序列字段名称。
order: 排序列顺序。

• 使用方法：

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

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

onCheck事件

监听选中行事件

• jQuery 事件: check.bs.table
• 参数: row, $element
• 详情:

当用户选中一行（table列表数据的一行）时触发，参数包含：

row: 与单击的行对应的记录。
$element: 检查DOM元素。

• 使用方法：

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

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

onUncheck事件

监听取消选中行事件

• jQuery 事件: uncheck.bs.table
• 参数: row, $element
• 详情:

当用户取消选中一行（table列表数据的一行）时触发，参数包含：

row: 与单击的行对应的记录。
$element: 未选中DOM元素。

• 使用方法：

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

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

onCheckAll事件

监听选中所有行事件

• jQuery 事件: check-all.bs.table
• 参数: rowsAfter, rowsBefore
• 详情:

当用户选中所有行（table列表数据的一行）时触发，参数包含：

rowsAfter: 现在选中的行的记录数组。
rowsBefore: 之前已选中行的记录数组。

• 使用方法：

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

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

onUncheckAll事件

监听取消选中所有行事件

• jQuery 事件: uncheck-all.bs.table
• 参数: rowsAfter, rowsBefore
• 详情:

当用户取消选中所有行时触发，参数包含：

rowsAfter: 现在选中的行的记录数组。
rowsBefore: 之前已选中行的记录数组。

• 使用方法：

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

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

onCheckSome事件

监听选中某些行事件

• jQuery 事件: check-some.bs.table
• 参数: rows
• 详情:

用户选中某些行时触发，参数包含：

rows: 与选中的行对应的记录数组。

• 使用方法：

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

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

onUncheckSome事件

监听取消选中某些行事件

• jQuery 事件: uncheck-some.bs.table
• 参数: rows
• 详情:

当用户取消选中某些行时触发，参数包含：

rows: 与选中的行对应的记录数组。

• 使用方法：

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

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

onLoadSuccess事件

监听成功加载远程数据时触发事件

• jQuery 事件: load-success.bs.table
• 参数: data
• 详情:

成功加载远程数据时触发，参数包含：

data: 远程数据。

• 使用方法：

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

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

onLoadError事件

监听加载远程数据时发生某些错误时触发事件

• jQuery 事件: load-error.bs.table
• 参数: status, jqXHR
• 详情:

在加载远程数据时发生某些错误时触发，参数包含：

status: 状态代码jqXHR.
jqXHR:jqXHR对象，它是XMLHTTPRequest对象的超集。

• 使用方法：

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

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

onColumnSwitch事件

监听切换列可见时触发事件

• jQuery 事件: column-switch.bs.table
• 参数: field, checked
• 详情:

切换列可见时触发 (showColumns)，参数包含：

field:与switch列对应的字段名称。
checked: 列的已选择状态。

• 使用方法：

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

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

onPageChange事件

监听更改页码或页面大小时触发事件

• jQuery 事件: page-change.bs.table
• 参数: number, size
• 详情:

更改页码或页面大小时触发，参数包含：

number: 页码。
size:页面大小。

• 使用方法：

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

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

onSearch事件

监听搜索表时触发事件

• jQuery 事件: search.bs.table
• 参数: text
• 详情:

搜索表时触发，参数包含：

text: 搜索输入的文本。

• 使用方法：

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

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

onToggle事件

监听切换表格视图时触发事件

• jQuery 事件: toggle.bs.table
• 参数: cardView
• 详情:

切换表格视图时触发，参数包含：

cardView: 表的cardView状态。

• 使用方法：

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

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

onPreBody事件

监听在渲染表体之前触发事件

• jQuery 事件: pre-body.bs.table
• 参数: data
• 详情:

在渲染表体之前触发，参数包含：

data: 渲染数据。

• 使用方法：

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

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

onPostBody事件

监听在表体呈现并在DOM中可用之后触发事件

• jQuery 事件: post-body.bs.table
• 参数: data
• 详情:

在表体呈现并在DOM中可用之后触发，参数包含：

data: 渲染数据。

• 使用方法：

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

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

onPostHeader事件

监听表头呈现并在DOM中可用之后触发事件

• jQuery 事件: post-header.bs.table
• 参数: undefined
• 详情:

在表头呈现并在DOM中可用之后触发。

• 使用方法：

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

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

onPostFooter事件

监听页脚呈现并在DOM中可用后触发事件

• jQuery 事件: post-footer.bs.table
• 参数: $tableFooter
• 详情:

在页脚呈现并在DOM中可用后触发，参数包含：

$tableFooter: 页脚的DOM元素。

• 使用方法：

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

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

onExpandRow事件

监听单击详细信息图标以展开详细视图时触发事件

• jQuery 事件: expand-row.bs.table
• 参数: index, row, $detail
• 详情:

单击详细信息图标以展开详细视图时触发，参数包含：

index: 扩展行的索引。
row: 与扩展行对应的记录。
$detail: div 当前 tr 元素之后的详细信息的DOM元素，您可以使用jQuery方法来自定义详细信息视图。

• 使用方法：

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

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

onCollapseRow事件

监听单击详细信息图标时会触发事件

• jQuery 事件: collapse-row.bs.table
• 参数: index, row, detailView
• 详情:

单击详细信息图标时会触发，以折叠详细视图，参数包含：

index:折叠行的索引。
row:与折叠行对应的记录。
detailView: 折叠的detailView。

• 使用方法：

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

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

onRefreshOptions事件

监听刷新选项后，在销毁和初始化表之前触发事件

• jQuery 事件: refresh-options.bs.table
• 参数: options
• 详情:

刷新选项后，在销毁和初始化表之前触发，参数包含：

options: 表选项对象。

• 使用方法：

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

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

onResetView事件

监听重置表格视图时触发事件

• jQuery 事件: reset-view.bs.table
• 参数: undefined
• 详情:

重置表格视图时触发。

• 使用方法：

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

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

onRefresh事件

监听单击刷新按钮后触发事件

• jQuery 事件: refresh.bs.table
• 参数: params
• 详情:

单击刷新按钮后触发，参数包含：

params: 对服务器的附加参数请求。

• 使用方法：

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

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

onScrollBody事件

监听桌面滚动时触发事件

• jQuery 事件: scroll-body.bs.table
• 参数:: undefined
• 详情:

桌面滚动时发射。

• 使用方法：

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

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