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

最新推荐文章于 2024-06-27 11:33:07 发布

logspool

最新推荐文章于 2024-06-27 11:33:07 发布

阅读量1w

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/logspool/article/details/84996691

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

我们在使用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());
  });
  }
});