bootstrap-table 冻结列导致表头与内容错乱

最新推荐文章于 2022-03-29 14:51:51 发布

置顶

晒太阳的斑马

最新推荐文章于 2022-03-29 14:51:51 发布

阅读量860

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43840954/article/details/117469940

版权

本文探讨了在使用 Bootstrap-Table 库时遇到的冻结列导致的表头与内容错乱的问题。通过分析代码并提供解决方案，帮助开发者解决这一常见困扰。

摘要由CSDN通过智能技术生成

/**
 * @author zhixin wen <wenzhixin2010@gmail.com>
 * @version: v1.0.1
 */

(function ($) {
   
    'use strict';

    $.extend($.fn.bootstrapTable.defaults, {
   
        fixedColumns: false,
        fixedNumber: 1
    });

    var BootstrapTable = $.fn.bootstrapTable.Constructor,
        _initHeader = BootstrapTable.prototype.initHeader,
        _initBody = BootstrapTable.prototype.initBody,
        _resetView = BootstrapTable.prototype.resetView;

    BootstrapTable.prototype.initFixedColumns = function () {
   
        this.$fixedHeader = $([
            '<div class="fixed-table-header-columns">',
            '<table>',
            '<thead></thead>',
            '</table>',
            '</div>'].join(''));

        this.timeoutHeaderColumns_ = 0;
        this.$fixedHeader.find('table').attr('class', this.$el.attr('class'));
        this.$fixedHeaderColumns = this.$fixedHeader.find('thead');
        this.$tableHeader.before(this.$fixedHeader);

        this.$fixedBody = $([
            '<div class="fixed-table-body-columns">',
            '<table>',
            '<tbody></tbody>',
            '</table>',
            '</div>'].join(''));

        this.timeoutBodyColumns_ = 0;
        this.$fixedBody.find('table').attr('class', this.$el.attr('class'));
        this.$fixedBodyColumns = this.$fixedBody.find('tbody');
        this.$tableBody.before(this.$fixedBody);
    };

    BootstrapTable.prototype.initHeader = function () {
   
        _initHeader.apply(this, Array