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

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

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

      解决方法:

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

$('#dataGrid').bootstrapTable({  
  method: 'post',  
  url: '/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",//通过服务器分页还是在前端js分页  
  queryParams: queryParams, //发送参数  
  queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求  
  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());
  });
  }
});


网址:http://www.itxst.com/detail/yaqzzfqy.html