原因: 使用 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
附件描述
来源: http://www.qdfuns.com/article/49499/e576bbb70bdb6c3b50852f19ea2100bb.html