一 整行表头渲染同一个样式:
这种比较简单,直接设置css 样式,现在还缺第二行背景颜色的设置。
具体css样式如下:
/* 第一行表头的样式 */
.ag-header-group-cell-with-group {
background-color: gold;
color: red;
}
/* 第二行表头的字体设置 */
.ag-header-cell-label {
color: blue;
font-size: x-small;
}
二 不同字段显示不同样式:
首先来看效果图,如果是你想要的,再继续看下去:
要想达到以上图片效果,最主要是靠ag-grid 中列的一个属性:headerClass,具体实现方式如下:
1. 在定义列的时候使用headerClass属性。比如:以上表格属于多层表头的模式,所以我定义列如下:
var columnDefs = [
{
headerName: "基础信息",
headerClass: firstTitleColor,// 列头样式渲染参数
children: [
{ headerName: '姓名(字体更大)', field: 'name' },
{ headerName: '性别', field: 'sex' },
{ headerName: '年龄(字体更大)', field: 'age' },
]
},
{
headerName: "其他信息",
headerClass: firstTitleColor,
children: [
{ headerName: '籍贯', field: 'jg' },
{ headerName: '省份', field: 'sf' },
{ headerName: '地址', field: 'dz' },
]
}
];
其中firstTitleColor是自己定义的一个函数,代码如下,中间的参数params用于接收列相关的属性,以便于函数内的一些判断:
const firstTitleColor = (params) => {
const columnName = params.colDef.headerName;
if (columnName === "基础信息") {
return "firstSpecialStyles"
}
return "firstcommonStyles"
};
所以,如图所示,根据参数获取了列名,当列名为基础信息的时候,返回样式firstSpecialStyles,如果是其他列,则返回firstcommonStyles。
firstSpecialStyles和firstcommonStyles是自定义的css样式。样式如下:
<style>
/* 有两层表头时,第一层表头是基础信息时渲染的颜色 */
.firstSpecialStyles {
color: blueviolet;
background-color: salmon;
}
/* 有两层表头时,第一层表头不是基础信息时渲染的颜色 */
.firstcommonStyles {
color: red;
background-color: gold;
font-size: larger;
}
</style>
利用以上代码就可以用将表头的第一行表头样式显示出来了,如图所示:
2.现在来设置第二层表头的样式,具体方法还是使用headerClass,也是根据params参数获取不同的列属性,设置不同的表头样式。只不过headerClass所放的位置,在这个页面中,我把对第二级表头的headerClass放在了defaultColDef中,这样,所有列都能调用到这个参数;
const columnColor = (params) => {
debugger;
const columnName = params.colDef.headerName;
if (columnName === "姓名(字体更大)" || columnName === "年龄(字体更大)") {
return "secondSpecialStyles"
}
return "secondcommonStyles"
};
var gridOptions = {
columnDefs: columnDefs,
rowData: data,
defaultColDef: {
resizable: true,
headerClass: columnColor
},
};
secondSpecialStyles和secondcommonStyles同样也是css样式定义:
/* 有两层表头时,第二层表头对应颜色的渲染 */
.secondSpecialStyles {
color: rgb(255, 0, 221);
background-color: wheat;
font-size: larger;
}
/* 有两层表头时,第二层表头对应颜色的渲染 */
.secondcommonStyles {
color: black;
background-color: powderblue;
}
如果只需要染渲染一列,不需要对其他列进行操作,则headerClass可以直接放到列定义里面去。
var columnDefs = [
{
headerName: "基础信息",
headerClass: firstTitleColor, // 列头样式渲染参数
children: [
{ headerName: '姓名(字体更大)', headerClass: columnColor, field: 'name' },
{ headerName: '性别', field: 'sex' },
{ headerName: '年龄(字体更大)', field: 'age' },
]
},
{
headerName: "其他信息",
headerClass: firstTitleColor,
children: [
{ headerName: '籍贯', field: 'jg' },
{ headerName: '省份', field: 'sf' },
{ headerName: '地址', field: 'dz' },
]
}
];
以上所有代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ag-grid 表格title颜色渲染</title>
<script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script>
<style>
/* 第一行表头的样式 */
/* .ag-header-group-cell-with-group {
background-color: gold;
color: red;
} */
/* 第二行表头的字体设置 */
/* .ag-header-cell-label {
color: blue;
font-size: x-small;
} */
/* 有两层表头时,第一层表头是基础信息时渲染的颜色 */
.firstSpecialStyles {
color: blueviolet;
background-color: salmon;
}
/* 有两层表头时,第一层表头不是基础信息时渲染的颜色 */
.firstcommonStyles {
color: red;
background-color: gold;
font-size: larger;
}
/* 有两层表头时,第二层表头对应颜色的渲染 */
.secondSpecialStyles {
color: rgb(255, 0, 221);
background-color: wheat;
font-size: larger;
}
/* 有两层表头时,第二层表头对应颜色的渲染 */
.secondcommonStyles {
color: black;
background-color: powderblue;
}
</style>
</head>
<body>
<div id="myGrid" style="width: 100%;height: 500px;" class="ag-theme-alpine"></div>
<script>
const columnColor = (params) => {
debugger;
const columnName = params.colDef.headerName;
if (columnName === "姓名(字体更大)" || columnName === "年龄(字体更大)") {
return "secondSpecialStyles"
}
return "secondcommonStyles"
};
const firstTitleColor = (params) => {
const columnName = params.colDef.headerName;
if (columnName === "基础信息") {
return "firstSpecialStyles"
}
return "firstcommonStyles"
};
// var columnDefs = [
// { headerName: '姓名', field: 'name', 'pinned': 'left' },
// { headerName: '性别', field: 'sex' },
// { headerName: '年龄', field: 'age' },
// { headerName: '籍贯', field: 'jg' },
// { headerName: '省份', field: 'sf' },
// { headerName: '地址', field: 'dz' , filter: false },
// ];
//定义表格列
var columnDefs = [
{
headerName: "基础信息",
headerClass: firstTitleColor, // 列头样式渲染参数
children: [
{ headerName: '姓名(字体更大)', field: 'name', headerClass: columnColor },
{ headerName: '性别', field: 'sex' },
{ headerName: '年龄(字体更大)', field: 'age' },
]
},
{
headerName: "其他信息",
headerClass: firstTitleColor,
children: [
{ headerName: '籍贯', field: 'jg' },
{ headerName: '省份', field: 'sf' },
{ headerName: '地址', field: 'dz' },
]
}
];
//与列对应的数据; 属性名对应上面的field
var data = [
{ name: '张三', sex: '男', age: '100', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路1号' },
{ name: '李四', sex: '女', age: '5', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
{ name: '王五', sex: '女', age: '20', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路31号' },
];
//将列和数据赋给gridOptions
var gridOptions = {
columnDefs: columnDefs,
rowData: data,
defaultColDef: {
resizable: true,
headerClass: columnColor
},
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
var eGridDiv = document.querySelector('#myGrid'); //myGrid 是容器div的ID
new agGrid.Grid(eGridDiv, gridOptions);
});
</script>
</body>
</html>