bootstrap table表格 设置背景颜色 设置字体颜色cellStyle 显示隐藏列(更换工具栏图标) 固定列 导出(兼容全部导出时(all)) 调整列宽 日期格式化1970-01-01bug

//设置背景颜色
cellStyle: function (value, row, index){
    return {css:{'background-color':'#F3F3F4'}};
}

//设置字体颜色
{
    field: 'employee.fei_total_sign',
    title: '总报名费',
    align: 'center',
    cellStyle: function(value, row, index){
        if (value <= 0){
            return {css:{"color":"red"}}
        }else{
            return {css:{"color":"blue"}}
        }
    }
}

//显示隐藏列
showColumns: true,//是否显示所有的列
iconSize: "sm",//修改工具栏按钮大小
//buttonsPrefix: 'btn btn-info btn-sm',//修改工具栏按钮样式
//icons: {//更换工具栏图标(解决刷新按钮图标不显示的问题)
//    refresh: 'fa-refresh'
//},

//固定列
fixedColumns: true,//固定列
//fixedNumber: 1,//固定前面列
fixedRightNumber: 1,//固定后面列

//导出
showExport: true,//是否显示导出
exportDataType: "basic",//'basic', 'all', 'selected'
exportTypes: ['excel'],//'json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf'//单项时有bug
exportOptions: {//tableExport.jquery.plugin参数
    type: "excel",//bootstrap-table-export的bug,当exportTypes只有一项时导出的永远是csv
    ignoreColumn: [-1],//忽略第几列
    fileName: "export"//导出文件命名
},
queryParams : function (params) {
    //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
    var temp = {
        //like12 modified,兼容全部导出时(all) params.limit为空 最大导出X条
        //size: params.limit == undefined ? 5000 : params.limit,//页面大小
        //page: params.limit == undefined ? 0 : (params.offset / params.limit),//页码
        size: params.limit,//页面大小
        page: (params.offset / params.limit),//页码
        //页面查询条件
        startTime: $("#startTime").val(),
        endTime: $("#endTime").val()
    };
    return temp;
}

//调整列宽
{
    field: '',
    title: '操作',
    align: 'center',
    width: 80,//列数较少时起作用(列数较多时不起作用，html中style设置table-layout:fixed才起作用)
    events: operateEvents,
    formatter: function (value, row, index){
        var btnInfo='';
        btnInfo += '<div style="width:70px;">';//调整列宽，在td中嵌套一个div，调整div大小(列数较多时起作用)
        btnInfo += '<button style="margin-right: 2px;padding: 1px" type="button" class="modify btn btn-outline btn-warning btn-sm">编辑</button>';
        btnInfo += '<button style="margin-right: 2px;padding: 1px" type="button" class="delete btn btn-outline btn-danger btn-sm">删除</button>';
        btnInfo += '</div>';
        return btnInfo;
    }
}

{
    field: 'createdDate',
    title: '创建时间',
    align: 'center',
    width: 80,//列数较少时起作用
    formatter: function (value, row, index) {
        return changeDateFormat(value)
    }
}

//bootstrap-table中时间戳转换为日期格式
function changeDateFormat(cellval) {
    //like12 add,20220420,bug,兼容某些平台返回值不是时间戳,而是(yyyy-MM-dd HH:mm:ss)等类型
    if(cellval != null && (cellval + "").indexOf("-") == 4){//需转换为字符串才能indexof,否则js将被卡死
        //调整列宽，在td中嵌套一个div，调整div大小(列数较多时起作用)
        return '<div style="width:70px;">'
            + cellval.substring(0,10)
            + '</div>';
    }

    //原时间戳模式
    if (cellval != null) {
        var date = new Date(parseInt((cellval + "").replace("/Date(", "").replace(")/", ""), 10));
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var tempStr = date.getFullYear() + "-" + month + "-" + currentDate;
        //调整列宽，在td中嵌套一个div，调整div大小(列数较多时起作用)
        return '<div style="width:70px;">'
            + tempStr
            + '</div>';
    }
}
function changeDateFormat2(cellval) {
    //like12 add,20220420,bug,兼容某些平台返回值不是时间戳,而是(yyyy-MM-dd HH:mm:ss)等类型
    if(cellval != null && (cellval + "").indexOf("-") == 4){//需转换为字符串才能indexof,否则js将被卡死
        //调整列宽，在td中嵌套一个div，调整div大小(列数较多时起作用)
        return '<div style="width:70px;">'//125或70
            + cellval
            + '</div>';
    }

    //原时间戳模式
    if (cellval != null) {
        var date = new Date(parseInt((cellval + "").replace("/Date(", "").replace(")/", ""), 10));
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        var tempStr = date.getFullYear() + "-" + month + "-" + currentDate
            + " " + hours + ":" + minutes + ":" + seconds;
        //调整列宽，在td中嵌套一个div，调整div大小(列数较多时起作用)
        return '<div style="width:70px;">'//125或70
            + tempStr
            + '</div>';
    }
}

//老模式
//bootstrap-table中时间戳转换为日期格式
function changeDateFormat(cellval) {
    var dateVal = cellval + "";
    if (cellval != null) {
        var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        //var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        //var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        //var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        return date.getFullYear() + "-" + month + "-" + currentDate
            //+ " " + hours + ":" + minutes + ":" + seconds
            ;
    }
}