国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

bootstrap table列和表頭對不齊的解決方法

2019-11-19 11:09:57
字體:
來源:轉載
供稿:網友

我們在使用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個精彩的專題:

Bootstrap學習教程

Bootstrap實戰教程

Bootstrap插件使用教程

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 绩溪县| 龙江县| 嘉峪关市| 武定县| 遂昌县| 会宁县| 吕梁市| 安西县| 澄迈县| 穆棱市| 交城县| 怀来县| 奈曼旗| 富阳市| 金山区| 潞西市| 灵石县| 独山县| 江门市| 龙陵县| 铜鼓县| 漠河县| 黄陵县| 阳西县| 康平县| 壤塘县| 手游| 临邑县| 沭阳县| 呼玛县| 望谟县| 南投县| 齐齐哈尔市| 新绛县| 靖远县| 阿合奇县| 城市| 丰县| 卓尼县| 双城市| 噶尔县|