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

  • 相关阅读:
    PythonStudy——数据类型总结 Data type summary
    PythonStudy——可变与不可变 Variable and immutable
    PythonStudy——列表操作 List operatio
    PythonStudy——列表的常用操作 List of common operations
    PythonStudy——列表类型 List type
    PythonStudy——字符串扩展方法 String extension method
    PythonStudy——字符串重要方法 String important method
    AWT,Swing,RCP 开发
    JQuery插件机制
    最新知识网站
  • 原文地址:https://www.cnblogs.com/yihuite-zch/p/9754232.html
Copyright © 2011-2022 走看看