bootstrap Table的 一些小操作

function HQCreatTable(ob) {
    var option = {
        cache: false,//是否使用緩存，預設為true，所以一般情況下需要設置一下這個屬性（*）
        scrollX: true,
        scrollY:true,
        striped: true,     //使表格帶有條紋 //是否顯示行間隔色
        sidePagination: "client",//分頁方式：client客戶端分頁，server服務端分頁（*）
        pagination: true,    //在表格底部顯示分頁工具欄
        pageNumber: 1,   //初始化載入第一頁，預設第一頁
        pageSize: 10,
        pageList: [ 10,15],//可供選擇的每頁的行數（*）
        showColumns: false,//是否顯示所有的列
        sortable: true, //是否啟用排序
        
        clickToSelect: true,//是否啟用點擊選中行
        showRefresh: false,  //顯示刷新按鈕
        //search: false,//是否顯示右上角的搜索框
        //toolbar: '#toolbar', //工具按鈕用哪個容器
        uniqueId: "ID", //每一行的唯一標識，一般為主鍵列
        undefinedText: "",
        toolbarAlign: 'left',
        exportDataType: "all", //basic', 'all', 'selected'.
    }
    if (ob.rowStyle) {
        option.rowStyle = ob.rowStyle;//行樣式 是函數
    }
    //排序
    if (ob.sortOrder) {
        option.sortOrder = ob.sortOrder;
    } else {
        option.sortOrder = "desc";
    }
    if (ob.sortName) {
        option.sortName = ob.sortName;
    }
    if (ob.showExport) {
        option.showExport = ob.showExport;//導出Excel
    }
    if (ob.showFooter) {
        option.showFooter = ob.showFooter;//是否顯示統計頁腳
    }
    if (ob.searchAlign) {
        option.searchAlign = ob.searchAlign;
    }
    if (ob.num) {
        option.pageSize = ob.num;//每頁的記錄行數（*）
    }
    if (ob.data) {
        option.data = ob.data;
    } else {
        option.data = [];
    }
    if (ob.search) {
        option.search = ob.search;
    }
    if (ob.columns) {
        option.columns = ob.columns;
    }
    if (ob.onClickRow) {
        option.onClickRow = ob.onClickRow;
    }
    if (ob.onDblClickRow) {
        option.onDblClickRow = ob.onDblClickRow;
    }
    if (ob.onDblClickRow) {
        option.onDblClickRow = ob.onDblClickRow;
    }
    if (ob.onCheck) {
        option.onCheck = ob.onCheck;
    }
    if (ob.onAll) {
        option.onAll = ob.onAll;
    }
    if (ob.onLoadSuccess) {
        option.onLoadSuccess = ob.onLoadSuccess;
    }
    if (ob.toolbar) {
        option.toolbar = ob.toolbar;
    }
    if (ob.singleSelect || ob.singleSelect == false) {
        option.singleSelect = ob.singleSelect
    } else {
        option.singleSelect = true;//禁止多選
    }
    if (ob.maintainSelected) {
        option.maintainSelected = ob.maintainSelected;
    } else {
        option.maintainSelected = false;//設置為 true 在點擊分頁按鈕或搜索按鈕時，將記住checkbox的選擇項
    }
    if (ob.detailView) { option.detailView = ob.detailView; }
    if (ob.onExpandRow) {
        option.onExpandRow = ob.onExpandRow;
    }
    if (ob.onEditableSave) {
        option.onEditableSave = ob.onEditableSave;
    }
    $(ob.id).bootstrapTable('destroy');
    $(ob.id).bootstrapTable(option);
    if (ob.data) {
        $(ob.id).bootstrapTable('load', ob.data);
    }
}

前端分頁的Table配置函數

<table id="Table3" data-row-style="rowStyle"></table>
 //行根據數據變色
    function rowStyle(row, index) {
        var classes = ['success'];
        var classes1 = ['danger'];
        var classes2 = ['warning'];
        if (row.bed_msg==0) {
            return {
                classes: classes2
            };
        }else{
            if (row.status == 1) {
                return {
                    classes: classes1
                };
            } else {
                    return {
                classes: classes
                };
            }
        }
        
    }

根據每行數據的一個欄位的值來改變行的背景色（class好像只能調用他本來預設的那幾個，很久之前寫的忘記了是不是這樣的）

formatter: function (value, row, index) {
                    // 根據row.列名   那狀態確定返回 true/false
                    if (row.status == 1) {
                        return {
                            disabled: true
                        };
                    }
                    
                }

這個是根據每行數據的一個欄位的值來是否禁用選擇框（我在之前項目需要做結算，已結算的和未結算的在一起，因此需要這個），formatter還可以寫別的函數，比如根據1，0值改成其對應的值

footerFormatter: function (data) {
                          return data.reduce(function (sum, row) {
                              return accAdd(sum, row["Selmoney"]);
                          }, 0) + "元";
                      }

footerFormatter是必須之前的配置Table時，showFooter屬性為true，否則不會顯示。我寫這個是前端分頁的話是Table所有數據的Selmoney值的總和，後端分頁的話則是當頁數據的總和。