Bootstrap-Table事件和⽅法
本⽂章为整理之后的，仅供参考
官⽅⽂档地址：
事件的调⽤⽅法，前⾯有过案例
$('#table').bootstrapTable({
data: "",
uniqueId: "id",
locale: "zh-CN",
columns: [],
.......
});
事件名称JQuery事件参数描述
onAll all.bs.table name, args 任何事件触发都会同时触发该事件, 包含2个参数name: 事件名称
args: 事件参数
onClickRow click-row.bs.table row, $element, field 当点击某⼀⾏时触发，包含3个参数row: 点击⾏的数据$element: 对应的<tr>元素
field：所点击的单元格对应的列名称
onDblClickRow dbl-click-row.bs.table row, $element, field 当双击击某⼀⾏时触发，包含3个参数row: 点击⾏的数据
$element: 对应的<tr>元素
field：所点击的单元格对应的列名称
onClickCell click-cell.bs.table field, value, row, $element 当点击某⼀个单元格时触发，包含4个参数field: 所点击的单元格对应的列名称value: 所点击的单元格对应列的值
row：单元格所在⾏数据
jquery官方文档下载$element: 对应的<td>元素
onDblClickCell dbl-click-cell.bs.table field, value, row, $element 当双击某⼀个单元格时触发，包含4个参数field: 所点击的单元格对应的列名称value: 所点击的单元格对应列的值
row：单元格所在⾏数据
$element: 对应的<td>元素
onSort sort.bs.table name, order 当⽤户点击列头对某⼀列进⾏排序时触发，包含2个参数name: 排序的列名称
order: 排序⽅式
onCheck check.bs.table row, $element 当⽤户选中⼀⾏时触发，包含2个参数row: 所选中⾏的⾏数据$element: 选中的<input>元素
onUncheck uncheck.bs.table row, $element 当⽤户取消选中⼀⾏时触发，包含2个参数row: 所取消选中的⾏数据$element: 选中的<input>元素
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 中可见后触发
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 当刷新表格选项时，在销毁当前表格并重新初始化新表格之前触发 onRefresh refresh.bs.table params当点击刷新按钮对表格进⾏刷新时触发
onResetView reset-view.bs.table当重置表格视图时触发
onScrollBody scroll-body.bs.table当对表格体进⾏滚动时触发
⽅法调⽤语法：
$('#table').bootstrapTable('method', parameter);
⽅法名参数描述
getOptions none获取表格的参数
getSelections none获取当前被选中的⾏
getAllSelections none获取当前被选中的⾏数据，包含搜索和过滤钱的
showAllColumns none展⽰所有列
hideAllColumns none隐藏所有列
getData userCurrentPage获取当前表格中加载的数据，参数useCurrentPage为true 将返回当前页内的数据getRowByUniqueId id根据唯⼀id获取⾏数据
load data将新数据加载到表格中
append data将新数据追加到表格末尾中
prepend data将新数据加⼊到表格最最前⾯
remove params 从表格中移除列名为指定值的数据，包含2个参数field: 列名
values: 列名取值数组
removeAll移除表格中的所有数据removeByUniqueId id根据唯⼀id移除⾏数据
insertRow params 插⼊多个新⾏到指定位置，每⼀⾏包含2个参数index：要插⼊到⾏的索引
row: 要插⼊的⾏数据
updateRow params 更新指定⾏的数据，每⼀⾏包含2个参数index：要插⼊到⾏的索引
row: 要插⼊的⾏数据
updateByUniqueId params 根据唯⼀ID更新⾏数据每⼀⾏包含2个参数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显⽰数据加载状态提⽰
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：新值
多语⾔⽤法：
在页⾯中引⼊所有需要的本地脚本
<script src="bootstrap-table-en-US.js"></script><script src="bootstrap-table-zh-CN.js"></script>然后通过JavaScript对本地脚本进⾏切换
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['en-US']);
// $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
原⽂链接：
博主使⽤到的⼩技巧都会更新上来，下期更精彩。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。