bootstrap table 相關

01 height屬性

height屬性,
若是按照官方的用法,寫在table的行間,那麼高度是.fixed-table-container.fixed-height 的高度;
若是是採用js生成的狀況,則是對應生成表格id所在元素的高度。
若是要自適應頁面高度來肯定表格高度
複製代碼

02 橫向滾動條對不齊的狀況

//scrollWidth = fixedBody.scrollWidth > fixedBody.clientWidth &&
 //fixedBody.scrollHeight > fixedBody.clientHeight +this.$header.outerHeight() ?
 scrollWidth = fixedBody.scrollWidth > fixedBody.clientWidth &&
 fixedBody.scrollHeight > fixedBody.clientHeight ? 
 getScrollBarWidth() : 0;
複製代碼

上面代碼,註釋掉的部分是源碼中的判斷方法,下面是修改的。 原博入口html

以前找到一種方法是註釋掉兩行代碼 我公司用的本身封裝的query-table,採用這種方法有個弊端,就是當點擊翻頁或者查詢按鈕從新生成表格後仍會出現對不齊的問題。因此最後沒采用這個方法。可是值得借鑑。 *注,按下面操做後,影響thead背景色的dom樣式還要處理下,bootstrap

if (this.options.showHeader && this.options.height) {
            this.$tableHeader.show();
            //註釋掉下面兩行 取消表頭初始化解決表頭和內容不對齊問題
            //this.resetHeader();
            //padding += this.$header.outerHeight();
}
複製代碼

原博入口bash

03 縱向表格內出現滾動條自適應

首先須要設置height屬性,其次在bootstrap的onLoadSuccess方法內添加判斷: 1,數據小於頁碼顯示的數量(默認10條)時,添加數據條數判斷; 2,大於頁面顯示數量,根據屏幕分辨率設定默認顯示條數。此處默認條數根據需求而改變。dom

04 bootstrap-table checkbox 根據返回值勾選

bootstrap table colums 寫法函數

var columns = [{ 
    field : ‘checked’, 
    checkbox : true, 
    //直接綁定js函數 
    formatter : stateFormatter 
    }]
複製代碼

用colums 屬性設置 顯示的格式ui

//寫在colums中就能夠直接調用this

function stateFormatter(value, row, index) { 
    if (row.state == true) 
    return { 
    disabled : true,//設置是否可用 
    checked : true//設置選中 
    }; 
    return value; 
} 
複製代碼

總結 能夠看出bootstrap checkbox 返回是這樣的一個結果對象spa

{ 
    disabled : true,//設置是否可用 
    checked : true//設置選中 
    }; 
複製代碼

可是 在經過bootstrap $(‘#Table’) .bootstrapTable(‘getAllSelections’) 獲取選中的行時候 仍然能夠得到到默認加載時選中的數據.net

原文:blog.csdn.net/sun89782780…code

相關文章
相關標籤/搜索