SpringBoot 十四 列表的多彩格式化显示

6-11 列表的多彩格式化显示
Bootstrap Table的官方在线帮助：https://bootstrap-table.com/docs/api/table-options/
通过该网址 要啥有啥
一处为格式名称 需要那个格式直接在JS内 或者html主页添加 二处则为 格式具体参数 用那个直接用
左上角view source 就是看源码 并且还可以跟普通的 bg-success 等bootstrap 默认元素 混合使用
主要讲了TheadClasses 表头格式 TableClasses 表格格式 RowStyle 整行格式 （可以放在同一function 内 也可以单独定义function）

https://hackerthemes.com/bootstrap-cheatsheet/#collapse 普通的bootstrap 就用这个
或者用这个后台模板的 https://colorlib.com/polygon/gentelella/index.html
Bootstrap-Table组件能够进行丰富多彩的格式化显示，主要包括下面几个方面
1.启用Bootstrap的Table样式；
classes:“table table-bordered table-hover table-dark”,//启用bootstrap的表格样式
直接在方法内加

2.表头的背景色；
直接在方法内加
theadClasses: “bg-success”, //表头的背景色

3.根据行中列的值动态对整行的文字及背景颜色进行设置；（可以放在同一function 内 也可以单独定义function）
管中窥豹 可见一斑
即可通过IF return 返回要显示的值 注意css和classes 的格式
还可通过常量rowStyle 、 row 程序自带 和 row.employeenumber 只要创建了就自带 进行设置 并且 row.employeenumber 这个是自动循环设置某一行
每个条件语句之后 必用{} 括号 括起来 return 和css 后边的语句都需要{}括起来
index 为每一行的索引
rowStyle: function (row,index){
if (row.employeenumber<33)
{
return {
css:{color:‘blue’}, //本行文字颜色（自定义）
classes: ‘bg-warning’// 本行背景颜色 （bootstrap 格式）
};
}
else if (row.employeenumber>35){//利用bootstrap颜色体系
return {css:{background:’#e5a028’}};//本行背景颜色（自定义）

        }
        else {// 保持原色彩
            return {}
            // 千万不要忘了else  不然如果有不符合条件的就显示失误了
        }
            },

4.对整列的文本进行格式化显示；

{
field: ‘comstatus’,
title: ‘运营状态’,
formatter: function indexFormatter(value, row, index){
var newValue="";
if (value==“开业”){newValue=’’+value+’’;}
else if (value==“未开业”){newValue=’’+value+’’}
else {newValue =’’+value+’’}
return newValue;
}
}
此处方法名 indexFormatter 为摆设 不具备实质性作用

    自己分析  rowStyle 属性返回的都是style  即便用class 用的也是classes：‘ ’  
    而对字段属性进行formatter  则可以混合着用   返回的是字符串   一般还在字符串内加上value的值  var 	newValue=   '<span class="badge bg-blue">'+value+'</span>'   return newValue 

以下为仿照字段 {
field: ‘comname’,
title: ‘公司名称’,
formatter:function (value,row,index){
return ‘超级无敌’+value;

        }
        灵活运用 value, row, index  值 行 列

5.对单元格的文本和背景进行格式化显示；
单元格格式修改函数 还是在字段内使用
cellStyle:function (value,row,index){
if (value==‘666’) return {css:{background:’#89ffb7’}}
else return value;

        }

6.灵活的采用Bootstrap的样式和自定义样式进行文本显示