【技术】BootStrapTable 滚动条控制

BootStrapTable 滚动条控制

帮助文档
滚动条控制
实际案例

帮助文档

滚动条控制

getScrollPosition方法

//获取当前位置
var pos= $('#table').bootstrapTable('getScrollPosition');
1
2

scrollTo方法

参数	描述
value	需要滚动到的位置，单位为px,如果设置为bottom表示滚动到底部
object	{unit: ‘px’, value: 100} 滚动到100px位置 {unit: ‘rows’, value: 6} 滚动到第6行

//获取当前位置
//滚动到100px的位置,测试后好像没有效果
$('#table').bootstrapTable('scrollTo',100);
//滚动到底部 有效
$('#table').bootstrapTable('scrollTo','bottom');

//滚动到800px的位置,测试后有效果但是感觉不准确
 $('#table').bootstrapTable('scrollTo',{unit: 'px', value: 800});
 //滚动到第8行 这个方法最准确
 $('#table').bootstrapTable('scrollTo',{unit: 'rows', value: 8});
1
2
3
4
5
6
7
8
9
10

实际案例

DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table">table>
            div>
        div>
    div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        // 被修改的行的下标
        var toRowIndex = 0;

        $(function() {
            var options = {
                // 数据加载之后，控制滚动条位置
                onLoadSuccess: function(){
                    $('#bootstrap-table').bootstrapTable('scrollTo',{unit: 'rows', value: toRowIndex});
                },
                columns: [{
                    checkbox: true
                },
                {
                    title: '操作',
                    halign: 'center',
                    align: 'right',
                    width: 200,
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('+ index + ');$.operate.editFull(\'' + row.fId + '\')"> 编辑 ');
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });

        /**
         * 获取修改数据的行下标
         * @param index
         */
        function getRowIndex(index){
            toRowIndex = index;
        }
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

相关阅读:
c#构建具有用户认证与管理的socks5代理服务端
《合成大西瓜》重制版！（联机版在做了）
Unity之ShaderGraph如何实现旋涡效果
Excel·VBA二维数组组合函数的应用实例
Mysql索引Hash和BTree的区别
创建一个链表，用标准io读取文件数据插入链表，读取链表数据插入另一个文件
电子电路仿真（Matlab代码实现）
【学生网页作业】航海王动漫网页 html+ css + JavaScript 简单的学生网页作业源码
动态内存分配：malloc、calloc、realloc（超详解析，多维度分析，小白一看就懂！！！！）
adb 命令扩展

原文地址：https://blog.csdn.net/m0_43453853/article/details/127760206