zoukankan      html  css  js  c++  java
  • 关于bootstrap-table插件的问题

    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中去设置

  • 相关阅读:
    Maven工程运行环境修改
    Maven中出现org.eclipse.jdt.internal.compiler.classfmt.ClassFormatException错误
    IDEA创建maven_web工程后,右键包没有Servlet、Filter、Listener选项
    Spring中的依赖注入
    什么是JavaBean
    mybatis配置SqlMapConfig.xm时没有提示
    JDK1.8之后匿名内部类访问方法中的局部变量不用加final修饰
    架构、框架和设计模式
    CitrixSQL Server 2016高可用之SQL镜像 SQL Server mirror 带见证服务器
    CitrixPVS BDM启动模式创建虚机 BDM模式部署桌面(精华)
  • 原文地址:https://www.cnblogs.com/yihuite-zch/p/9754232.html
Copyright © 2011-2022 走看看