bootstrap-table固定表头，同时适配高度，兼容ie，checkbox，固定列解决方案(续)

bootstrap-table固定表头，同时适配高度，兼容ie，checkbox，固定列解决方案(续)

前文链接：bootstrap-table固定表头，同时适配高度，固定列解决方案

上篇本人对 懒得安分 的技术进行改造，得到的一个初始版js插件，此大神的原文：
JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能：彻底解决高度问题

在实战中，bug频频出现，如兼容性不解决，当点击bootstrap-table的显示隐藏列，会出现画面重叠，也就是原来生成的障眼法的表格不删除，还有就是bootstrap-table的左侧checkbox不能使用。

问题一：兼容性

原来代码：ie下$tr.html('')会把$tds的内容也清空

var $tr = $(this).clone(),
$tds = $tr.find('td');
$tr.html('');

解决：对其用一个临时变量保存，在清空即可

var $tr1 = $(this).clone(),
$tr= $(this).clone(),
$tds = $tr1.find('td');

$tr.html('');

问题二：画面重叠

原来代码：没有在初始化fixed-column的表前，先对已存在的进行清空，导致每次变化，都会产生新的表格，

BootstrapTable.prototype.initFixedColumns = function () {
    if(this.options.leftFixedColumns){

解决：在初始化障眼表格前，对其进行清空

BootstrapTable.prototype.initFixedColumns = function () {
    $($.find('.fixed-table-header-columns')).remove();
    $($.find('.fixed-table-body-columns')).remove();
    if(this.options.leftFixedColumns){

问题三：checkbox固定使用

原来代码：只是对样式等内容进行静态复制，导致点击checkbox没有效果

解决：对原来的checkbox进行伪造的同时，复制原本不固定列时，点击checkbox需要取的值到伪造的checkbox里面，然后通过自己的getValue（）获取选中的checkbox值，小段代码如下：

this.$body.find('tr[data-index]').each(function () {
            var index = $(this).data('index');
            var tmpData = that.options.data[index].id;

            if(that.options.leftFixedColumns){
                that.$fixedBody.find('input[data-index="' + index + '"]').val(tmpData);
            }
            that.$body.find('input[data-index="' + index + '"]').val(tmpData);

        });

getValue()函数的代码如下：

function getValue(){
    var result=[];
    var $tableBody=$('.fixed-table-body-columns');
    if($tableBody.length==0){
        $tableBody=$('.fixed-table-body').find('table');
        var x= $.map($tableBody.bootstrapTable('getSelections'), function (row) {
            return row.id
             // 想返回什么字段就换成什么
            });
        return x;

    }
    if($tableBody.find('input').length==0){
        $tableBody=$('.fixed-table-body').find('table').find('tbody');
    }
    $tableBody.find('input').each(function(){
        if ($(this).attr("checked")) {
            result.push($(this).val())
        }
    });
    return result;  

}

补充css样式代码：

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

.fixed-table-header-columns .table,
.fixed-table-body-columns .table {
    border-right: 1px solid #ddd;
}

.fixed-table-header-columns .table.table-no-bordered,
.fixed-table-body-columns .table.table-no-bordered {
    border-right: 1px solid transparent;
}

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

.bootstrap-table .table-hover > tbody > tr.hover > td{
    background-color: #f5f5f5;
}

具体的js文件下载链接：
强化版bootstrap-table-fixed-columns.js

欢迎转载，但请声明原处，