Bootstrap-Table事件和方法

淩亂°似流年 2021-11-11 00:50 431阅读 0赞

本文章为整理之后的，仅供参考

官方文档地址：[http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/][http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation]

事件的调用方法，前面有过案例

$('#table').bootstrapTable({
        data: "",
        uniqueId: "id",          
        locale: "zh-CN",   
        columns: [],
        .......
    });

<table> 
 <tbody> 
 <tr> 
 <td>事件名称</td> 
 <td>JQuery事件</td> 
 <td>参数</td> 
 <td align="left">描述</td> 
 </tr> 
 <tr> 
 <td>onAll</td> 
 <td>all.bs.table</td> 
 <td>name, args</td> 
 <td align="left">任何事件触发都会同时触发该事件, 包含2个参数 name: 事件名称 args: 事件参数</td> 
 </tr> 
 <tr> 
 <td>onClickRow</td> 
 <td>click-row.bs.table</td> 
 <td>row, $element, field</td> 
 <td align="left">当点击某一行时触发，包含3个参数&nbsp; row: 点击行的数据 $element: 对应的&lt;tr&gt;元素 field:所点击的单元格对应的列名称</td> 
 </tr> 
 <tr> 
 <td>onDblClickRow</td> 
 <td>dbl-click-row.bs.table</td> 
 <td>row, $element, field</td> 
 <td align="left">当双击击某一行时触发，包含3个参数&nbsp; row: 点击行的数据 $element: 对应的&lt;tr&gt;元素 field:所点击的单元格对应的列名称</td> 
 </tr> 
 <tr> 
 <td>onClickCell</td> 
 <td>click-cell.bs.table</td> 
 <td>field, value, row, $element</td> 
 <td align="left">当点击某一个单元格时触发，包含4个参数 field: 所点击的单元格对应的列名称&nbsp; value: 所点击的单元格对应列的值 row:单元格所在行数据 $element: 对应的&lt;td&gt;元素</td> 
 </tr> 
 <tr> 
 <td>onDblClickCell</td> 
 <td>dbl-click-cell.bs.table</td> 
 <td>field, value, row, $element</td> 
 <td align="left">当双击某一个单元格时触发，包含4个参数 field: 所点击的单元格对应的列名称&nbsp; value: 所点击的单元格对应列的值 row:单元格所在行数据 $element: 对应的&lt;td&gt;元素</td> 
 </tr> 
 <tr> 
 <td>onSort</td> 
 <td>sort.bs.table</td> 
 <td>name, order</td> 
 <td align="left">当用户点击列头对某一列进行排序时触发，包含2个参数 name: 排序的列名称 order: 排序方式</td> 
 </tr> 
 <tr> 
 <td>onCheck</td> 
 <td>check.bs.table</td> 
 <td>row, $element</td> 
 <td align="left">当用户选中一行时触发，包含2个参数 row: 所选中行的行数据 $element: 选中的&lt;input&gt;元素</td> 
 </tr> 
 <tr> 
 <td>&nbsp;onUncheck</td> 
 <td>&nbsp;uncheck.bs.table</td> 
 <td>row, $element&nbsp;</td> 
 <td align="left">当用户取消选中一行时触发，包含2个参数 row: 所取消选中的行数据 $element: 选中的&lt;input&gt;元素</td> 
 </tr> 
 <tr> 
 <td>&nbsp;onCheckAll</td> 
 <td>&nbsp;check-all.bs.table</td> 
 <td>&nbsp;rows</td> 
 <td align="left">当用户点击全选框时触发，包含1个参数&nbsp; rows: 选中的行数据数组</td> 
 </tr> 
 <tr> 
 <td>onUncheckAll&nbsp;</td> 
 <td>&nbsp;uncheck-all.bs.table&nbsp;</td> 
 <td>rows</td> 
 <td align="left">当用户点击全选框取消选择时触发，包含1个参数&nbsp; rows: 取消选中的行数据数组</td> 
 </tr> 
 <tr> 
 <td>&nbsp;onCheckSome</td> 
 <td>&nbsp;check-some.bs.table</td> 
 <td>rows&nbsp;</td> 
 <td align="left">当用户选中某些行时触发，包含1个参数&nbsp; rows: 选中的行数据数组</td> 
 </tr> 
 <tr> 
 <td>&nbsp;onUncheckSome</td> 
 <td>uncheck-some.bs.table&nbsp;</td> 
 <td>&nbsp;rows</td> 
 <td align="left">&nbsp;当用户取消选中某些行时触发，包含1个参数&nbsp; rows: 取消选中的行数据数组</td> 
 </tr> 
 <tr> 
 <td>&nbsp;onLoadSuccess</td> 
 <td>load-success.bs.table&nbsp;</td> 
 <td>&nbsp;data</td> 
 <td align="left">&nbsp;当远程数据被加载完成后触发</td> 
 </tr> 
 <tr> 
 <td>&nbsp;onLoadError</td> 
 <td>&nbsp;load-error.bs.table</td> 
 <td>&nbsp;status, res</td> 
 <td align="left">&nbsp;当远程数据被加载出错后触发</td> 
 </tr> 
 <tr> 
 <td>&nbsp;onColumnSwitch</td> 
 <td>&nbsp;column-switch.bs.table</td> 
 <td>field, checked&nbsp;</td> 
 <td align="left">&nbsp;当切换列的显示状态（可见或不可见）时触发</td> 
 </tr> 
 <tr> 
 <td>&nbsp;onColumnSearch</td> 
 <td>column-search.bs.table&nbsp;</td> 
 <td>&nbsp;field, text</td> 
 <td align="left">&nbsp;对列内容进行搜索时触发</td> 
 </tr> 
 <tr> 
 <td>onPageChange&nbsp;</td> 
 <td>&nbsp;page-change.bs.table</td> 
 <td>number, size&nbsp;</td> 
 <td align="left">&nbsp;当切换每页条数时触发</td> 
 </tr> 
 <tr> 
 <td>&nbsp;onSearch</td> 
 <td>&nbsp;search.bs.table</td> 
 <td>text&nbsp;</td> 
 <td align="left">&nbsp;当对表格内容进行搜索时触发</td> 
 </tr> 
 <tr> 
 <td>&nbsp;onToggle</td> 
 <td>&nbsp;toggle.bs.table</td> 
 <td>cardView&nbsp;</td> 
 <td align="left">&nbsp;当切换表格的显示视图时触发</td> 
 </tr> 
 <tr> 
 <td>&nbsp;onPreBody</td> 
 <td>&nbsp;pre-body.bs.table</td> 
 <td>&nbsp;data</td> 
 <td align="left">&nbsp;在对表格体进行渲染前触发</td> 
 </tr> 
 <tr> 
 <td>&nbsp;onPostBody</td> 
 <td>post-body.bs.table&nbsp;</td> 
 <td>&nbsp;data</td> 
 <td align="left">&nbsp;在表格体渲染完成，并在 DOM 中可见后触发</td> 
 </tr> 
 <tr> 
 <td>&nbsp;onPostHeader</td> 
 <td>&nbsp;post-header.bs.table</td> 
 <td>&nbsp;none</td> 
 <td align="left">&nbsp;在表格列头渲染完成，并在 DOM 中可见后触发</td> 
 </tr> 
 <tr> 
 <td>&nbsp;onExpandRow</td> 
 <td>&nbsp;expand-row.bs.table</td> 
 <td>index, row, $detail&nbsp;</td> 
 <td align="left">&nbsp;当点击详情按钮展开详情视图时触发</td> 
 </tr> 
 <tr> 
 <td>onCollapseRow&nbsp;</td> 
 <td>&nbsp;collapse-row.bs.table</td> 
 <td>&nbsp;index, row</td> 
 <td align="left">&nbsp;当点击关闭详情按钮收起详情视图时触发</td> 
 </tr> 
 <tr> 
 <td>&nbsp;onRefreshOptions</td> 
 <td>&nbsp;refresh-options.bs.table</td> 
 <td>options&nbsp;</td> 
 <td align="left">&nbsp;当刷新表格选项时，在销毁当前表格并重新初始化新表格之前触发</td> 
 </tr> 
 <tr> 
 <td>&nbsp;onRefresh</td> 
 <td>refresh.bs.table</td> 
 <td>&nbsp;params</td> 
 <td align="left">当点击刷新按钮对表格进行刷新时触发</td> 
 </tr> 
 <tr> 
 <td>&nbsp;onResetView</td> 
 <td>&nbsp;reset-view.bs.table</td> 
 <td>&nbsp;</td> 
 <td align="left">&nbsp;当重置表格视图时触发</td> 
 </tr> 
 <tr> 
 <td>onScrollBody</td> 
 <td>scroll-body.bs.table</td> 
 <td>&nbsp;</td> 
 <td align="left">当对表格体进行滚动时触发</td> 
 </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/combat/p/11113126.html

[http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation]: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/