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只有一项时导出的永远是csvignoreColumn: [-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;}
}

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

VsCode 如何设置背景图以及字体颜色
设置背景图在设置背景图前需要下载一个叫background的插件(直接在商店里面搜多就可以安装) 然后打开Setting文件按照上述点击就可以打开Setting文件将下面的代码复制到Settin ...
微信小程序中这么简单的设置页面背景图及字体颜色的方法，你还不会？
在微信小程序中,我们不免的要设置背景图片和字体颜色. 那怎么样才能做到简单的设置背景图片和字体颜色呢? 话不多说,直接开讲首先先说怎么设置页面背景图片: 这是博主准备的照片. 下面是在wxml中的代 ...
EasyExcel 单元格背景颜色、字体颜色使用2种设置颜色方法（IndexedColors中定义的颜色，自定义RGB颜色）实现
1 Maven配置 <dependency><groupId>cn.hutool</groupId><artifa ...
layui table 字体大小_layui table设置某一行的字体颜色方法
table自带的可以设置某一个单元格颜色,必须根据内容来修改,对于很多列同时修改并不方便,直接使用js操作比较简单. 首先自定义一个div,内部存放table,根据class找到table,然后找到行 ...
layui 行变灰_layui table设置某一行的字体颜色方法
table自带的可以设置某一个单元格颜色,必须根据内容来修改,对于很多列同时修改并不方便,直接使用js操作比较简单. 首先自定义一个div,内部存放table,根据class找到table,然后找到行 ...
vscode设置背景护眼主题颜色、字体颜色不影响其他主题的颜色
解决问题的初衷,是本人在打代码疲劳的时候想换个主题颜色,平时习惯用深色,用浅色的时候想把背景调成护眼绿,没找到合适的插件,在网上找到更改背景色的代码,用着挺不错. 但是在更改回我的默认深色主题时,背景 ...
bootstrap 黑边框表格样式_设置Bootstrap Table表格样式并隔行变色
设置Bootstrap Table表格样式并隔行变色设置bootstrap-table表格样式可以通过设置classess属性进行设置,官方默认支持黑色主题.隔行变色等样式,你也可以自定义样式把你的 ...
NotePad++设置背景颜色和字体颜色
我们使用NotePad++的时候,使用时间长了可能会眼花,这时候就可以设置一下背景颜色和字体颜色给我们的眼睛放松一下了,小编接下来就带你修改NotePad++的背景颜色: 首先打开NotePad++: ...
html字体颜色 html中设置字体颜色代码字体颜色获取
html字体颜色 html中设置字体颜色代码字体颜色获取 html字体颜色设置更改,html设置字体颜色代码方法有哪些 DIVCSS5为大家介绍在html中设置字体颜色方法,字体颜色修改方法,字体颜 ...
table 表格，table表格细边框设置，table表格禁止内容换行设置，table表格斑马线设置
table 表格,细边框设置,禁止内容换行设置,斑马线设置 1.没有设置时的样式 2.设置后的样式 3.html代码 <div class="cp-table">< ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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