bootstraptable是需要配合jquery使用的。
bootstraptable事件导航:
- onAll事件
- onClickRow事件
- onDblClickRow事件
- onClickCell事件
- onDblClickCell事件
- onSort事件
- onCheck事件
- onUncheck事件
- onCheckSome事件
- onUncheckSome事件
- onLoadSuccess事件
- onLoadError事件
- onColumnSwitch事件
- onPageChange事件
- onSearch事件
- onToggle事件
- onPreBody事件
- onPostBody事件
- onPostHeader事件
- onPostFooter事件
- onExpandRow事件
- onCollapseRow事件
- onRefreshOptions事件
- onResetView事件
- onRefresh事件
- onScrollBody事件
bootstraptable的监听事件列表:
onAll事件
监听所有事件
- jQuery 事件: all.bs.table
- 参数: name, args
- 介绍:
触发所有事件时触发,参数包含:
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, ...) {
// ...
})
请问一下,为什么bootstrapTable 的 onScrollBody 事件不生效,两种监听事件方式都没有生效
你是怎么写的呀,能贴出来看一下吗