本篇文章是打算自己用于记录ag-grid自身的css样式的记录和功能。
1. .ag-header-group-cell-with-group
作用:多表头,前几层(最后一行表头除外)表头样式的设置。
.ag-header-group-cell-with-group {
background-color: gold;
color: red;
justify-content: center; /* 表头会居中显示 */
}
表头居中显示用: justify-content: center;
2. .ag-header-cell-label
最后一行表头的设置 ,可以设置字体颜色和大小,但是背景颜色设置不能铺满单元格。
.ag-header-cell-label {
color: red;
font-size: x-small;
background-color: royalblue;
justify-content: center; /* 表头会居中显示 */
}
同上:
表头居中显示用: justify-content: center;
3 .ag-cell-expandable
对分组(rowGroup)的那一列样式进行设置
.ag-cell-expandable {
font-weight: bold;
color: blue;
margin-top: -6px; /* 根据表格的实际情况来调整距离 */
}
4 .ag-row-level-0、ag-row-level-1、.ag-row-level-2
.ag-row-level-X 表示设置分组层第几层的样式。.ag-row-level-0表示设置分组层第一层的样式,ag-row-level-1表示设置分组层第二层的样式,ag-row-level-2表示设置分组层第三层的样式。
/* 分组第一层行的颜色 */
.ag-row-level-0 {
background-color: plum !important;
}
/* 分组第二层行的颜色 */
.ag-row-level-1 {
background-color: papayawhip !important;
}
/* 分组第三层行的颜色.......以此类推 */
.ag-row-level-2 {
background-color: powderblue !important;
}