解决bootstrap table固定列复选框失效 (bootstrap-table-fixed-columns)
投稿于 被查看 41212 次 评论:39
解决bootstrap table固定列复选框失效 (bootstrap-table-fixed-columns)
原因:使用bootstrap-table-fixed-columns插件生产的固定列是另一个表格,覆盖于自己原表格之上,实现固定列的效果,但是这样导致原表格的checkbox失效,我们使用的一些操作失效,不能进行选中。下面是我的解决方法:
解决思路:让所生成的新表格的checkbox隐藏或者透明度为0,原表格的checkbox等级升高,所在的tr设为relative,所在的td设absolute,固定位置,新表格的头和身体(thead tbody)是两个表格,所以有可能导致上下不对照,偏移,我们可以把原表格的width赋值给新表格的thead,tbody,这样不仅解决了新表格不偏移,还可以让两个表格位置更为准确。
代码:
1.引入顺序:
<link rel="stylesheet" href="../../../css/bootstrap.min.css" /> <link rel="stylesheet" href="../../../css/bootstrap-table.css" /> <link rel="stylesheet" href="../../../css/bootstrap-table-fixed-columns.css" /> <script src="../../../js/comjs/jquery.1.9.min.js"></script> <script src="../../../js/comjs/bootstrap.min.js"></script> <script src="../../../js/comjs/bootstrap-table.js"></script> <script src="../../../js/comjs/bootstrap-table-zh-CN.js"></script> <script src="../../../js/comjs/bootstrap-table-fixed-columns.js"></script>
2.表格代码
<table id="tableSpot" data-show-columns="true" class='table'></table>
3.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; }
4.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 = $([ '<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.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);
5.解决函数
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('<th style="width:30px;display:inline-block" data-field="kong"></th>') } for(var i=0;i<tds.length;i++){ var index=$(name+' tbody>tr').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;j<ts.length;j++){ for(var h=0;h<len;h++){ $('.fixed-table-body-columns tbody>tr').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') }) })
大致就这么些了。
表格插件的小demo
1.
bootstrap-table-fixed-columns demo
附件描述
用户评论