bootstrap table動態表格配置詳解

一、html部分  （只需要一個帶ID的table即可）

<table id="tb_departments"></table>

二、主要部分（js動態渲染配置）

window.onload = function () {

   

$('#tb_departments').bootstrapTable({
    sortOrder: "asc", //排序方式
    height: tableHeight(), // 動態配置表格高度
    pageNumber: 1, //初始化加載第一頁，默認第一頁
    pagination: true, //分頁
    pageSize: 10000, //每頁的記錄行數（*）
    minimumCountColumns: 2, //最少允許的列數
    cardView: false, //是否顯示詳細視圖
    showExport: false, //是否顯示導出
    exportDataType: "basic", //basic', 'all', 'selected'.
    align: 'center',
    columns: [{
            field: 'cardId',
            visible: true, //是否顯示
            align: 'center',
            valign: 'middle',  //垂直居中
            title: '序號'
        },
        {
            field: 'id',
            visible: false, //是否顯示
            
        }, 
        {
            field: 'groupname',
            align: 'center',
            title: '所屬中隊',
            class: 'colStyle',  //動態添加每一列樣式
            valign: 'middle',
        }, 
        {
            field: 'address',
            align: 'center',
            title: '打卡地點',
            valign: 'middle',    
            class: 'colStyle',
            formatter:paramsMatter,   //通過formatter方法為當前列動態添加一個回調函數
        },
        {
            field: 'workType',
            align: 'center',
            valign: 'middle',
            valign: 'middle', //設置表頭列居中對齊
            class: 'colStyle',
            title: '白/夜班',
            
            
        },
        {
            field: 'classType',
            align: 'center',
            valign: 'middle',
            class: 'colStyle',
            title: '班次',
            
        },
        {
            field: 'startEarliestTime',
            align: 'center',
            class: 'colStyle',
            valign: 'middle',
            title: '上班開始打卡時間',
            
        },

        {
            field: 'startLatestTime',
            align: 'center',
            class: 'colStyle',
            valign: 'middle',
            title: '上班時間',
            
        },
        {
            field: 'middleTime',
            align: 'center',
            class: 'colStyle',
            valign: 'middle',
            title: '上班時間分割點',
        },
        {
            field: 'endEarliestTime',
            align: 'center',
            valign: 'middle',
            class: 'colStyle',
            title: '下班時間',
            

        },
        {
            field: 'endLatestTime',
            align: 'center',
            valign: 'middle',
            class: 'colStyle',
            title: '下班結束打卡時間',
            
        },
        {
            field: 'tonightFlag',
            align: 'center',
            valign: 'middle',
            title: '跨天',
            
        },
        {
            field: 'username',
            align: 'center',
            title: '人員',
            class: 'colStyle',
            valign: 'middle',
            formatter:paramsMatter1,
            
        },
        {
            field: 'distanceRange',
            align: 'center',
            valign: 'middle',
            visible: false, //是否顯示
            title: '打卡范圍(米)',
            
        },
        {
            field: 'click',
            align: 'center',
            class: 'colStyle',
            valign: 'middle',
            title: '操作',    
            align: 'center',
            formatter: function(value, row, index) {
                //console.log(row)
                var value = value;
                var index = index;
                var rowStr = row.id;
                //console.log(path);        
                var html =
                    '<button type="button"  class="btn btn-primary btn-xs btndo" onclick="Edit(\'' +
                    rowStr + '\')">修改</button>'
                html +=
                    '<button type="button"  class="btn btn-primary btn-xs btndo" onclick="Delete(\'' +
                    rowStr + '\')" >刪除</button>'
                return html;
            }
        }
    ],
    formatNoMatches: function() {
        return "暫無數據";
    },
  
});
      arr = [
             {
              "username":"張三"

 }
 ] 154  $("#tb_departments").bootstrapTable('load', arr); //實例化完成后渲染表格數據 155  
    //下面是表格相關的回調函數
function paramsMatter(value, row, index) { //對該列數據進行二次處理 比如過長顯示“...” 157     var values = row.address.replace("浙江省杭州市","");//獲取當前字段的值
    if(values.length>6){ 159          return "<span title="+values+">"+values.slice(0,6)+"...</span>"
    }else{ 161          return "<span title="+values+">"+values+"</span>"
 } 163    
} 169 function paramsMatter1(value, row, index) { 170     var values = row.username;//獲取當前字段的值
    var str = values.substring(0, values.lastIndexOf(',')); 172     if(values.length>6){ 173          return "<span title="+str+">"+str.slice(0,6)+"...</span>"
    }else{ 175          return "<span title="+str+">"+str+"</span>"
 } 177 
} 179 function tableHeight() { 180     //可以根據自己頁面情況進行調整
    return $(window).height() - 160; 182 }
    function Edit(data){    //對每行數據編輯
}

 function Delete(data){    //刪除每行數據
}
三、注意（想修改表格樣式的話小提示）
修改表頭樣式   在bootstraptable.css中搜   “.fixed-table-container thead th .th-inner”
修稿body中的td 搜 “.bootstrap-table .table:not(.table-condensed) > tfoot > tr > td”

 

}