bootstrap table支持高度百分比的实例代码


本文整理自网络,侵删。

更改BootstrapTable.prototype.resetView 方法,以支持高度百分比定义,适应不同高度屏幕

BootstrapTable.prototype.resetView = function (params) {
    var padding = 0;
    if (params && params.height) {
      this.options.height = params.height;
    }
    this.$selectAll.prop('checked', this.$selectItem.length > 0 &&
      this.$selectItem.length === this.$selectItem.filter(':checked').length);
    if (this.options.height) {
      var toolbarHeight = this.$toolbar.outerHeight(true),
        paginationHeight = this.$pagination.outerHeight(true),
        height = this.options.height;
       //关键代码
      if (this.options.height.toString().indexOf("%") != -1) {
        height = $(window).height() * (parseFloat(this.options.height) / 100);
      }
      height = height - toolbarHeight - paginationHeight;
      this.$tableContainer.css('height', height + 'px');
    }
    if (this.options.cardView) {
      // remove the element css
      this.$el.css('margin-top', '0');
      this.$tableContainer.css('padding-bottom', '0');
      this.$tableFooter.hide();
      return;
    }
    if (this.options.showHeader && this.options.height) {
      this.$tableHeader.show();
      this.resetHeader();
      padding += this.$header.outerHeight();
    } else {
      this.$tableHeader.hide();
      this.trigger('post-header');
    }
    if (this.options.showFooter) {
      this.resetFooter();
      if (this.options.height) {
        padding += this.$tableFooter.outerHeight() + 1;
      }
    }
    // Assign the correct sortable arrow
    this.getCaret();
    this.$tableContainer.css('padding-bottom', padding + 'px');
    this.trigger('reset-view');
  };

更改后的bootstrap-table.js的完整代码:

阅读剩余部分

相关阅读 >>

帝国CMS通过自定义函数获取新闻文章数的实现代码

php函数之error_reporting(e_all ^ e_notice)详细说明

帝国CMS 建立目录不成功!请检查目录权限 的解决办法

帝国CMS列表页面调用关键字tag的方法

帝国CMS栏目没有图片则调用其他图片或者不调用的实现代码

帝国CMS 二级域名绑定栏目的最完美的解决方案

自定义函数解决帝国CMS的简介截取字符时出现html的问题

fateextella阿提拉阵营人物伊斯坎达尔图鉴及资料介绍

帝国CMS会员登陆赠送积分的实现方法

帝国CMS 批量替换字段值使用说明

更多相关阅读请进入《帝国CMS》频道 >>



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...