我們在使用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: '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()); }); }});如果大家還想深入學習,可以點擊這里進行學習,再為大家附3個精彩的專題:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答