bootstrapTable 表头固定（可全局控制）列与列无缝对接

最新推荐文章于 2024-08-07 18:44:28 发布

unkul

最新推荐文章于 2024-08-07 18:44:28 发布

阅读量403

点赞数 3

分类专栏： bootstrapTable 文章标签： bootstrap

本文链接：https://blog.csdn.net/unkul/article/details/138350260

版权

bootstrapTable 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目场景：

在项目上遇到bootstrapTable限制高度后，滚动条滚动后，表头跑上面去了，为解决这个问题，自己修改了一些bug；前端代码如下，主要是修改了bootstrap-table.css

实现

 <div style="width:52%; float:left;height:340px;" id="FreezingHeadDiv_Order">
        <table id="tb_order"></table>
    </div>
`
$('#tb_Model').bootstrapTable({
                toolbar: '#toolbar',
                columns: columns,
                pagination: true,
                showRefresh: true,
                striped: true,
                url: ‘',
                sidePagination: 'server',
                queryParams: function (params) {
                    return {
                        limit: params.limit,
                        offset: params.offset
                    };
                },
                shiftSelect: true,
                clickToSelect: true,
                height: 300,
                singleSelect: true,
                onPageChange: function (number, size) {
                    m_pagerow = (number - 1) * size;
                },
                rowStyle: function (row, index) {
                    var classes = [];
                    if (row.BOM_STATUS == "0") {
                        classes = ['warning'];//warning active info danger success
                    }
                    else {
                        classes = ['success'];
                    }
                    return { classes: classes[0] }
                }
            });

bootstrap-table.css：

.table-container {
    width: 100%;
    overflow: auto;
}

/*.table-container tbody tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}*/

.table-container thead tr > th {
    position: sticky;
    top: 0;
    z-index: 6;
    background-color: white;
}

.table-container tbody tr > th:first-child {
    z-index: 6;
}