解决bootstrap table固定列复选框失效 (bootstrap-table-fixed-columns)

解决bootstrap table固定列复选框失效 (bootstrap-table-fixed-columns)

解决bootstrap table固定列复选框失效 (bootstrap-table-fixed-columns)

原因

原因：使用bootstrap-table-fixed-columns插件生产的固定列是另一个表格，覆盖于自己原表格之上，实现固定列的效果，但是这样导致原表格的checkbox失效，我们使用的一些操作失效，不能进行选中。下面是我的解决方法：
解决思路：让所生成的新表格的checkbox隐藏或者透明度为0，原表格的checkbox等级升高，所在的tr设为relative,所在的td设absolute，固定位置，新表格的头和身体（thead tbody）是两个表格，所以有可能导致上下不对照，偏移，我们可以把原表格的width赋值给新表格的thead,tbody，这样不仅解决了新表格不偏移，还可以让两个表格位置更为准确。

代码

引入顺序

表格代码

bootstrap-table-fixed-columns.css

        .fixed-table-header-columns,
        .fixed-table-body-columns {
            position: absolute;
            display: none;
            box-sizing: border-box;
            overflow: hidden;
        }

        .fixed-table-header-columns .table,
        .fixed-table-body-columns .table {
            border-right: none;
        }

        .fixed-table-header-columns .table.table-no-bordered,
        .fixed-table-body-columns .table.table-no-bordered {
            border-right: none;
        }

        .fixed-table-body-columns table {
            position: absolute;
            animation: none;
        }

        .bootstrap-table .table-hover > tbody > tr.hover > td{
            background-color: transparent;
        }
        .fixed-table-container thead th .th-inner, .fixed-table-container tbody td .th-inner {
            line-height: 18px;
        }

        .fixed-table-pagination .pagination a {
            padding: 5px 10px;
        }

        .fixed-table-toolbar .bars, .fixed-table-toolbar .search, .fixed-table-toolbar .columns {
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .fixed-table-header-columns thead>tr>th.bs-checkbox,.fixed-table-body-columns tbody>tr>td.bs-checkbox{
            opacity:0
        }
      #tableSpot thead>tr,#tableSpot tbody>tr{
          position: relative;

      }
      .bs-checkbox{
      width:30px!important
      }
      #tableSpot thead>tr>th.bs-checkbox,#tableSpot tbody>tr>td.bs-checkbox {
          z-index: 2;
          position: absolute;
          top: 34px;
          left:2px;
      }

js代码

(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 = $([
            '
',
            '',
            '',
            '',
            '
'].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 = $([
            '
',
            '',
            '',
            '',
            '
'].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.prototype.slice.apply(arguments));

        if (!this.options.fixedColumns) {
            return;
        }

        this.initFixedColumns();

        var that = this, $trs = this.$header.find('tr').clone();
        $trs.each(function () {
            $(this).find('th:gt(' + that.options.fixedNumber + ')').remove();
        });
        this.$fixedHeaderColumns.html('').append($trs); 
    };

    BootstrapTable.prototype.initBody = function () {
        _initBody.apply(this, Array.prototype.slice.apply(arguments));

        if (!this.options.fixedColumns) {
            return;
        }

        var that = this,
            rowspan = 0;

        this.$fixedBodyColumns.html('');
        this.$body.find('> tr[data-index]').each(function () {
            var $tr = $(this).clone(),
                $tds = $tr.find('td');

            $tr.html('');
            var end = that.options.fixedNumber;
            if (rowspan > 0) {
                --end;
                --rowspan;
            }
            for (var i = 0; i < end; i++) {
                $tr.append($tds.eq(i).clone());
            }
            that.$fixedBodyColumns.append($tr);

            if ($tds.eq(0).attr('rowspan')){
                rowspan = $tds.eq(0).attr('rowspan') - 1;
            }
        });
    };

    BootstrapTable.prototype.resetView = function () {
        _resetView.apply(this, Array.prototype.slice.apply(arguments));

        if (!this.options.fixedColumns) {
            return;
        }

        clearTimeout(this.timeoutHeaderColumns_);
        this.timeoutHeaderColumns_ = setTimeout($.proxy(this.fitHeaderColumns, this), this.$el.is(':hidden') ? 100 : 0);

        clearTimeout(this.timeoutBodyColumns_);
        this.timeoutBodyColumns_ = setTimeout($.proxy(this.fitBodyColumns, this), this.$el.is(':hidden') ? 100 : 0);
    };

    BootstrapTable.prototype.fitHeaderColumns = function () {
        var that = this,
            visibleFields = this.getVisibleFields(),
            headerWidth = 0;

        this.$body.find('tr:first-child:not(.no-records-found) > *').each(function (i) {
            var $this = $(this),
                index = i;

            if (i >= that.options.fixedNumber) {
                return false;
            }

            if (that.options.detailView && !that.options.cardView) {
                index = i - 1;
            }

            that.$fixedHeader.find('th[data-field="' + visibleFields[index] + '"]')
                .find('.fht-cell').width($this.innerWidth());
            headerWidth += $this.outerWidth();
        });
        this.$fixedHeader.width(headerWidth).show();
    };

    BootstrapTable.prototype.fitBodyColumns = function () {
        var that = this,
            top = -(parseInt(this.$el.css('margin-top')) - 2),
            // the fixed height should reduce the scorll-x height
            height = this.$tableBody.height() - 14;

        if (!this.$body.find('> tr[data-index]').length) {
            this.$fixedBody.hide();
            return;
        }

        if (!this.options.height) {
            top = this.$fixedHeader.height();
            height = height - top;
        }

        this.$fixedBody.css({
            width: this.$fixedHeader.width(),
            height: height,
            top: top
        }).show();

        this.$body.find('> tr').each(function (i) {
            that.$fixedBody.find('tr:eq(' + i + ')').height($(this).height() - 1);
        });

        // events
        this.$tableBody.on('scroll', function () {
            that.$fixedBody.find('table').css('top', -$(this).scrollTop());
        });
        this.$body.find('> tr[data-index]').off('hover').hover(function () {
            var index = $(this).data('index');
            that.$fixedBody.find('tr[data-index="' + index + '"]').addClass('hover');
        }, function () {
            var index = $(this).data('index');
            that.$fixedBody.find('tr[data-index="' + index + '"]').removeClass('hover');
        });
        this.$fixedBody.find('tr[data-index]').off('hover').hover(function () {
            var index = $(this).data('index');
            that.$body.find('tr[data-index="' + index + '"]').addClass('hover');
        }, function () {
            var index = $(this).data('index');
            that.$body.find('> tr[data-index="' + index + '"]').removeClass('hover');
        });
    };

})(jQuery);

解决函数

function initTable(name){
    $('.fixed-table-header-columns thead>tr>th.bs-checkbox>div.th-inner,.fixed-table-body-columns tbody>tr>td.bs-checkbox ').empty()
    var tds=$(name+' tbody>tr>td.bs-checkbox')
    if($(name+' thead>tr').eq(1).children('th').attr('data-field')!="kong"){
        $(name+' thead>tr').eq(1).prepend('')
    }
    for(var i=0;itr').eq(i).attr('data-index');
        var dataNum=parseInt(index[index.length-1])
        var num=78+35*dataNum
        if(dataNum<5){
            num=72+35*dataNum
        }
        tds.eq(i).css('top',num+'px')
    }
    var ts=$(name+' tbody>tr')
    var len=$('.fixed-table-body-columns tbody>tr').eq(0).children('td').length
    for(var j=0;jtr').eq(j).children('td').eq(h).css('width',ts.eq(j).children('td').eq(h).css('width'))
        }

    }
}

初始化

在页面初始化的时候就要执行一下

$(function(){
    initTable('#tableSpot')
        $('#tableSpot')
        .on('page-change.bs.table', function (e,dataArr) {//点击分页函数
            initTable('#tableSpot')
          })
        .on('column-switch.bs.table', function (e,dataArr) {//当切换列的时候触发。
                  initTable('#tableSpot')
          })
}）

大致就这么些了。