1.当有很多列时,且设置height属性的情况下表头和表格易出现不对齐的情况?
解决方案:更新bootstrap-table 插件至1.11.1以上版本 下载地址:https://github.com/wenzhixin/bootstrap-table/releases
2.列固定时出现表格不对齐的情况?
解决方案:插入以下js代码即可
1 (function ($) { 2 'use strict'; 3 4 $.extend($.fn.bootstrapTable.defaults, { 5 fixedColumns: false, 6 fixedNumber: 1 7 }); 8 9 var BootstrapTable = $.fn.bootstrapTable.Constructor, 10 _initHeader = BootstrapTable.prototype.initHeader, 11 _initBody = BootstrapTable.prototype.initBody, 12 _resetView = BootstrapTable.prototype.resetView; 13 14 BootstrapTable.prototype.initFixedColumns = function () { 15 this.$fixedHeader = $([ 16 '<div class="fixed-table-header-columns">', 17 '<table>', 18 '<thead></thead>', 19 '</table>', 20 '</div>'].join('')); 21 22 this.timeoutHeaderColumns_ = 0; 23 this.$fixedHeader.find('table').attr('class', this.$el.attr('class')); 24 this.$fixedHeaderColumns = this.$fixedHeader.find('thead'); 25 this.$tableHeader.before(this.$fixedHeader); 26 27 this.$fixedBody = $([ 28 '<div class="fixed-table-body-columns">', 29 '<table>', 30 '<tbody></tbody>', 31 '</table>', 32 '</div>'].join('')); 33 34 this.timeoutBodyColumns_ = 0; 35 this.$fixedBody.find('table').attr('class', this.$el.attr('class')); 36 this.$fixedBodyColumns = this.$fixedBody.find('tbody'); 37 this.$tableBody.before(this.$fixedBody); 38 }; 39 40 BootstrapTable.prototype.initHeader = function () { 41 _initHeader.apply(this, Array.prototype.slice.apply(arguments)); 42 43 if (!this.options.fixedColumns) { 44 return; 45 } 46 47 this.initFixedColumns(); 48 49 var that = this, $trs = this.$header.find('tr').clone(); 50 $trs.each(function () { 51 $(this).find('th:gt(' + (that.options.fixedNumber - 1) + ')').remove(); 52 }); 53 this.$fixedHeaderColumns.html('').append($trs); 54 }; 55 56 BootstrapTable.prototype.initBody = function () { 57 _initBody.apply(this, Array.prototype.slice.apply(arguments)); 58 59 if (!this.options.fixedColumns) { 60 return; 61 } 62 63 var that = this, 64 rowspan = 0; 65 66 this.$fixedBodyColumns.html(''); 67 this.$body.find('> tr[data-index]').each(function () { 68 var $tr = $(this).clone(), 69 $tds = $tr.find('td'); 70 71 //$tr.html('');这样存在一个兼容性问题,在IE浏览器里面,清空tr,$tds的值也会被清空。 72 //$tr.html(''); 73 var $newtr = $('<tr></tr>'); 74 $newtr.attr('data-index', $tr.attr('data-index')); 75 $newtr.attr('data-uniqueid', $tr.attr('data-uniqueid')); 76 var end = that.options.fixedNumber; 77 if (rowspan > 0) { 78 --end; 79 --rowspan; 80 } 81 for (var i = 0; i < end; i++) { 82 $newtr.append($tds.eq(i).clone()); 83 } 84 that.$fixedBodyColumns.append($newtr); 85 86 if ($tds.eq(0).attr('rowspan')) { 87 rowspan = $tds.eq(0).attr('rowspan') - 1; 88 } 89 }); 90 }; 91 92 BootstrapTable.prototype.resetView = function () { 93 _resetView.apply(this, Array.prototype.slice.apply(arguments)); 94 95 if (!this.options.fixedColumns) { 96 return; 97 } 98 99 clearTimeout(this.timeoutHeaderColumns_); 100 this.timeoutHeaderColumns_ = setTimeout($.proxy(this.fitHeaderColumns, this), this.$el.is(':hidden') ? 100 : 0); 101 102 clearTimeout(this.timeoutBodyColumns_); 103 this.timeoutBodyColumns_ = setTimeout($.proxy(this.fitBodyColumns, this), this.$el.is(':hidden') ? 100 : 0); 104 }; 105 106 BootstrapTable.prototype.fitHeaderColumns = function () { 107 var that = this, 108 visibleFields = this.getVisibleFields(), 109 headerWidth = 0; 110 111 this.$body.find('tr:first-child:not(.no-records-found) > *').each(function (i) { 112 var $this = $(this), 113 index = i; 114 115 if (i >= that.options.fixedNumber) { 116 return false; 117 } 118 119 if (that.options.detailView && !that.options.cardView) { 120 index = i - 1; 121 } 122 123 that.$fixedHeader.find('th[data-field="' + visibleFields[index] + '"]') 124 .find('.fht-cell').width($this.innerWidth()); 125 headerWidth += $this.outerWidth(); 126 }); 127 this.$fixedHeader.width(headerWidth).show(); 128 }; 129 130 BootstrapTable.prototype.fitBodyColumns = function () { 131 var that = this, 132 top = -(parseInt(this.$el.css('margin-top'))), 133 // the fixed height should reduce the scorll-x height 134 height = this.$tableBody.height() - 18; 135 if (!this.$body.find('> tr[data-index]').length) { 136 this.$fixedBody.hide(); 137 return; 138 } 139 140 if (!this.options.height) { 141 top = this.$fixedHeader.height()- 1; 142 height = height - top; 143 } 144 145 this.$fixedBody.css({ 146 this.$fixedHeader.width(), 147 height: height, 148 top: top + 1 149 }).show(); 150 151 this.$body.find('> tr').each(function (i) { 152 that.$fixedBody.find('tr:eq(' + i + ')').height($(this).height() - 0.5); 153 var thattds = this; 154 that.$fixedBody.find('tr:eq(' + i + ')').find('td').each(function (j) { 155 $(this).width($($(thattds).find('td')[j]).width() + 1); 156 }); 157 }); 158 159 // events 160 this.$tableBody.on('scroll', function () { 161 that.$fixedBody.find('table').css('top', -$(this).scrollTop()); 162 }); 163 this.$body.find('> tr[data-index]').off('hover').hover(function () { 164 var index = $(this).data('index'); 165 that.$fixedBody.find('tr[data-index="' + index + '"]').addClass('hover'); 166 }, function () { 167 var index = $(this).data('index'); 168 that.$fixedBody.find('tr[data-index="' + index + '"]').removeClass('hover'); 169 }); 170 this.$fixedBody.find('tr[data-index]').off('hover').hover(function () { 171 var index = $(this).data('index'); 172 that.$body.find('tr[data-index="' + index + '"]').addClass('hover'); 173 }, function () { 174 var index = $(this).data('index'); 175 that.$body.find('> tr[data-index="' + index + '"]').removeClass('hover'); 176 }); 177 }; 178 179 })(jQuery);
3.设置多行表头出现崩溃或者加载不出来的时候
解决方案:不用js设置bootstrap-table 中的column属性改用html中去设置