layui table reload时定位到当前滚动的第一行
时间: 2023-10-05 21:05:29 浏览: 119
layui 实现table翻页滚动条位置保持不变的例子
要实现 layui table 在 reload 后定位到当前滚动的第一行,可以通过获取当前表格的滚动位置,然后在 reload 后调用 layui 的 scrollTo 方法来实现。具体实现代码如下:
```javascript
layui.use('table', function(){
var table = layui.table;
var currentScrollTop = 0; // 当前表格的滚动位置
table.render({
elem: '#test',
url: 'yourDataUrl',
page: true,
limit: 10,
limits: [10,20,30],
cols: [[
{field:'id', title:'ID'},
{field:'username', title:'用户名'},
{field:'email', title:'邮箱'},
{field:'sex', title:'性别'},
{field:'city', title:'城市'},
{field:'sign', title:'签名'},
{field:'experience', title:'积分'},
{field:'score', title:'评分'},
{field:'classify', title:'职业'},
{field:'wealth', title:'财富'}
]]
});
// 监听表格滚动事件
$('.layui-table-body').on('scroll', function(){
currentScrollTop = $(this).scrollTop();
});
// 监听表格 reload 事件
table.on('reload', function(){
// 调用 scrollTo 方法将表格滚动到当前位置
$('.layui-table-body').scrollTop(currentScrollTop);
});
});
```
上面的代码中,我们将当前表格的滚动位置保存在变量 currentScrollTop 中,然后在 reload 事件中调用 scrollTo 方法将表格滚动到当前位置。这样就实现了在 reload 后定位到当前滚动的第一行的效果。
阅读全文