Bootstrap-Table事件和方法

2024-04-06 11:36•mysql•阅读 406

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

官方文档地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

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

$(\'#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:单元格所在行数据 $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 中可见后触发
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	显示数据加载状态提示
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\']);

原文链接：https://blog.csdn.net/pengjunlee/article/details/80659747

博主使用到的小技巧都会更新上来，下期更精彩。