【技术】BootStrapTable 滚动条控制

最新推荐文章于 2024-04-03 10:52:03 发布

Riu_Peter

最新推荐文章于 2024-04-03 10:52:03 发布

阅读量2.5k

点赞数 2

分类专栏： BootStrap 文章标签： bootstrap javascript 滚动条

本文链接：https://blog.csdn.net/m0_43453853/article/details/127760206

版权

BootStrap 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

BootStrapTable 滚动条控制

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

帮助文档

先上帮助文档

滚动条控制

getScrollPosition方法

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

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});

实际案例

<!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('<a class="btn btn-success btn-xs" href="javascript:void(0)" οnclick="getRowIndex(' + index + ');$.operate.editFull(\'' + row.fId + '\')"><i class="fa fa-edit"></i> 编辑</a> ');
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });

        /**
         * 获取修改数据的行下标
         * @param index
         */
        function getRowIndex(index){
            toRowIndex = index;
        }
    </script>
</body>
</html>