bootstraptable列和表头对不齐的解决方法

   我们在使用bootstraptable做表格展示时,有时需要固定表格的高度当数据超出高度会出现滚动条,这时有可能出现表头列和数据列对不齐。出现这个问题的原因是数据列出现了滚动条占了宽度,造成表头 数据 的div宽度不一样。

      通过Chrome浏览器 f12,看到样式为 .fixed-table-header  .fixed-table-body .fixed-table-footer的3个div容器宽度不一样, .fixed-table-header  .fixed-table-footer这两个div没有滚动条。

      解决方法请查看: http://www.itxst.com/detail/yaqzzfqy.html 

     bootstraptable在渲染完列表时会执行onPostBody事件,代码如下。

$('#dataGrid').bootstrapTable({  
  method: 'post',  
  url: 'http://www.itxst.com/?ajax',  
  dataType: "json",  
  striped: true,     //隔行变色 
  pagination: true, //底部显示分页码
  pageSize: 30,  //每页显示行数
  pageNumber: 1,  //页码
  pageList: [30, 50, 100, 200, 500],  //每页显示数量选择器
  idField: "objectId",  //主键字段   
  showColumns: true, //显示隐藏列    
  showRefresh: true,  //刷新按钮  
  singleSelect: true,   
  search: false,  
  clickToSelect: true,  
  sidePagination: "server",  
  queryParams: queryParams,  
  queryParamsType: "limit",   
  toolbar: "#toolbar", //设置工具栏的Id  
  columns: column, //要显示的列
  silent: true,  //刷新事件必须设置  
  formatLoadingMessage: function () {  
    return "it小书童正在加载中...";  
  },  
  formatNoMatches: function () {  
    return '未查询到结果';  
  },  
  onLoadError: function (data) {  
    
  },  
  onClickRow: function (row) {  
    window.location.href = "/detail?id=" + row.objectId;  
  },  
  onPostBody:function()
  {
  //重点就在这里,获取渲染后的数据列td的宽度赋值给对应头部的th,这样就表头和列就对齐了
   var header=$(".fixed-table-header table thead tr th");
   var body=$(".fixed-table-header table tbody tr td");
   var footer=$(".fixed-table-header table tr td");
    body.each(function(){
     header.width((this).width());
     footer.width((this).width());
  });
  }
});

 

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值