bootstrap table 事件
bootstrap table onScrollBody表格滚动事件
当bootstrap table表格有滚动条的情况下，拖动滚动条时执行的事件，但是测试了scrollTo和手动滚动滚动条都未触发该事件，只在初始化时触发了该事件。
绑定onScrollBody事件方法一
$('#table').bootstrapTable({
columns: columns,
onScrollBody:function()
{
alert("你滚动了表格滚动条");
}
});绑定onScrollBody事件方法二
$('#table').on('scroll-body.bs.table', function (e){
alert("你滚动了表格滚动条");
});完整代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://www.itxst.com/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script>
<link href="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
<link href="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.css" rel="stylesheet" />
<script src="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.js"></script>
<title>bootstrap table onScrollBody表格滚动事件例子</title>
<style>
.table-demo {
width: 80%;
margin: 30px auto 0px auto;
}
.fixed-table-header {
border-right: solid 1px #ddd;
border-top: solid 1px #ddd;
}
.fixed-table-header table {
border-top: solid 0px #ddd !important;
margin-top:-1px;
}
</style>
</head>
<body >
<div id="tool">
<button onclick="scrollx()">滚动到指定位置</button>
</div>
<div class="table-demo">
<table id="table"></table>
</div>
<script>
//设置需要显示的列
var columns = [{
field: 'Id',
title: '序列'
}, {
field: 'Col',
title: '名称'
}, {
field: 'StockNum',
title: '库存'
}];
//bootstrap table初始化数据
$('#table').bootstrapTable({
columns: columns,
data: getData(),
classes: "table table-bordered table-striped table-sm ",
height:300,
toolbar:"#tool",
onScrollBody:function()
{
alert("你滚动了表格滚动条");
}
});
function scrollx()
{
$('#table').bootstrapTable('scrollTo','bottom');
}
function getData()
{
var data = [];
for (var i = 0; i < 100; i++)
{
var item = {
Id: i,
Col: '测试',
StockNum: i+6
};
data.push(item);
};
return data;
}
</script>
</body>
</html>