我正在构建一个表格，需要更改交替列的背景颜色，包括标题。我确实修改了 tabulator.css，它对列背景本身效果很好，但只是部分适用于标题。主组标题背景不会改变： 第一个结果。
我确实根据Tabulator 文档添加了一些格式化程序扩展：
Tabulator.prototype.extendModule("format", "formatters", {
bold:function(cell, formatterParams){
return "<strong>" + cell.getValue() + "</strong>"; //make the contents of the cell bold
},
uppercase:function(cell, formatterParams){
return cell.getValue().toUpperCase(); //make the contents of the cell uppercase
},
grayed:function(cell, formatterParams) {
var value = cell.getValue();
cell.getElement().style.backgroundColor = "#93a3a7";
cell.getElement().style.color = "#fff";
return "<strong>" + value + "</strong>";
}
});
这是我修改后的css。诀窍是从 .tabulator .tabulator-header .tabulator-col 类中删除背景属性，并添加一个“备用”类来切换备用列的背景：
.tabulator .tabulator-header {
position: relative;
box-sizing: border-box;
width: 100%;
border-bottom: 0px solid #fff;
background: #00b4e1;
color: #fff;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.tabulator .tabulator-header .alternate {
background-color: #93a3a7;
}
.tabulator .tabulator-header .tabulator-col {
display: inline-block;
position: relative;
box-sizing: border-box;
border-right: 1px solid #aaa;
text-align: center;
vertical-align: bottom;
overflow: hidden;
}
最后是我的构造函数：
function tabulatorGenericClassement(data, tableName, nbOfRaces, raceNamesStr) {
//console.log(data);
var raceNames = raceNamesStr.split(";");
var raceName = "";
var raceNum = "";
var colDef = [];
var colRaces = [];
var colRacesGroup = "";
var colGroup = "";
var isOdd = false;
colDef.push(JSON.parse("{\"title\":\"Regulation\", \"field\":\"reg\", \"width\":150, \"visible\":false}"));
colDef.push(JSON.parse("{\"title\":\"Pos\", \"field\":\"pos\", \"sorter\":\"number\", \"hozAlign\":\"center\"}"));
colDef.push(JSON.parse("{\"title\":\"Driver\", \"field\":\"driver\"}"));
colDef.push(JSON.parse("{\"title\":\"Total pts\", \"field\":\"points\", \"hozAlign\":\"center\", \"formatter\":\"bold\"}"));
for (i = 0; i <= nbOfRaces; i++) {
isOdd = !isOdd;
raceName = raceNames[i];
raceNum = raceName.substring(raceName.length - 2, raceName.length);
if (raceNum == "R2"){isOdd = !isOdd;};
if ( isOdd ){
switch ( raceNum ) {
case "R1":
colGroup = "[{\"title\":\"Pts\", \"field\":\"points" + i + "\", \"hozAlign\":\"center\", \"formatter\":\"grayed\", \"cssClass\":\"alternate\"},";
colGroup = colGroup + "{\"title\":\"Pos\", \"field\":\"pos" + i + "\", \"hozAlign\":\"center\", \"formatter\":\"grayed\", \"cssClass\":\"alternate\"}]";
colRacesGroup = "[{\"title\":\"" + raceNum + "\", \"cssClass\":\"alternate\", \"formatter\":\"grayed\", \"columns\":" + colGroup + "},";
break;
case "R2":
colGroup = "[{\"title\":\"Pts\", \"field\":\"points" + i + "\", \"hozAlign\":\"center\", \"formatter\":\"grayed\", \"cssClass\":\"alternate\"},";
colGroup = colGroup + "{\"title\":\"Pos\", \"field\":\"pos" + i + "\", \"hozAlign\":\"center\", \"formatter\":\"grayed\", \"cssClass\":\"alternate\"}]";
colRacesGroup = colRacesGroup + "{\"title\":\"" + raceNum + "\", \"cssClass\":\"alternate\", \"columns\":" + colGroup + "}]";
colDef.push(JSON.parse("{\"title\":\"" + raceName.substring(0, raceName.length-2) + "\", \"cssClass\":\"alternate\", \"formatter\":\"grayed\", \"columns\":" + colRacesGroup + "}"));
break;
default:
colGroup = "[{\"title\":\"<p><br/>Pts</p>\", \"field\":\"points" + i + "\", \"hozAlign\":\"center\", \"formatter\":\"grayed\", \"cssClass\":\"alternate\"},";
colGroup = colGroup + "{\"title\":\"<p><br/>Pos</p>\", \"field\":\"pos" + i + "\", \"hozAlign\":\"center\", \"formatter\":\"grayed\", \"cssClass\":\"alternate\"}]";
//colDef.push(JSON.parse("{\"title\":\"" + raceName + "\", \"columns\":[{\"title\":\"\", \"columns\":" + colGroup + "}]}"));
colDef.push(JSON.parse("{\"title\":\"" + raceName + "\", \"cssClass\":\"alternate\", \"formatter\":\"grayed\", \"columns\":" + colGroup + "}"));
}
} else {
switch ( raceNum ) {
case "R1":
colGroup = "[{\"title\":\"Pts\", \"field\":\"points" + i + "\", \"hozAlign\":\"center\"},";
colGroup = colGroup + "{\"title\":\"Pos\", \"field\":\"pos" + i + "\", \"hozAlign\":\"center\"}]";
colRacesGroup = "[{\"title\":\"" + raceNum + "\", \"columns\":" + colGroup + "},";
break;
case "R2":
colGroup = "[{\"title\":\"Pts\", \"field\":\"points" + i + "\", \"hozAlign\":\"center\"},";
colGroup = colGroup + "{\"title\":\"Pos\", \"field\":\"pos" + i + "\", \"hozAlign\":\"center\"}]";
colRacesGroup = colRacesGroup + "{\"title\":\"" + raceNum + "\", \"columns\":" + colGroup + "}]";
colDef.push(JSON.parse("{\"title\":\"" + raceName.substring(0, raceName.length-2) + "\", \"columns\":" + colRacesGroup + "}"));
break;
default:
colGroup = "[{\"title\":\"<p><br/>Pts</p>\", \"field\":\"points" + i + "\", \"hozAlign\":\"center\"},";
colGroup = colGroup + "{\"title\":\"<p><br/>Pos</p>\", \"field\":\"pos" + i + "\", \"hozAlign\":\"center\"}]";
//colDef.push(JSON.parse("{\"title\":\"" + raceName + "\", \"columns\":[{\"title\":\"\", \"columns\":" + colGroup + "}]}"));
colDef.push(JSON.parse("{\"title\":\"" + raceName + "\", \"columns\":" + colGroup + "}"));
}
}
}
var table = new Tabulator(tableName, {
headerSort:false,
height:1000,
data:data,
layout:"fitData",
groupBy:"reg",
groupStartOpen:true,
groupHeader:function(value, count, data, group){
return value;
},
groupToggleElement:"header",
columns:colDef
});
}
最终结果： 最终结果
