[英]How can I to color a row in Ag-Grid with Angular
I need to color a row when my backend return a specific attribute.当我的后端返回特定属性时,我需要为一行着色。 I am using Ag-grid with Angular.我正在使用带有 Angular 的 Ag-grid。 At first I just try to color a row, without any rule, just for test, but it still didn't work.起初我只是尝试为一行着色,没有任何规则,只是为了测试,但它仍然没有用。
My HTML:我的 HTML:
<ag-grid-angular
#agGrid style="width: auto; height: 300px;" class="ag-theme-material"
(gridReady)="onGridReady($event)"
[rowData]="rowData"
[gridOptions]="gridOptions"
[rowClassRules]="rowClassRules"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[modules]="modules"
[pagination]="true"
[paginationPageSize]="paginationPageSize"
[domLayout]="domLayout"
[rowHeight]="rowHeight"
[overlayLoadingTemplate]="overlayLoadingTemplate"
[overlayNoRowsTemplate]="overlayNoRowsTemplate"
> </ag-grid-angular>
My.ts:我的.ts:
My grid settings:我的网格设置:
this.agGridService.getHeaderPlan().subscribe(header => {
this.columnDefs = header;
});
this.defaultColDef = {
enableRowGroup: true,
enablePivot: true,
enableValue: true,
sortable: true,
filter: true,
resizable: true,
editable: true
};
this.paginationPageSize = 8;
this.domLayout = 'autoHeight';
this.rowHeight = 40;
this.overlayLoadingTemplate =
`<div class="spinner-border text-primary" style="width: 5rem; height: 5rem;" role="status">
<span class="sr-only">Loading...</span>
</div>`;
this.overlayNoRowsTemplate =
`<div class="spinner-border text-primary" style="width: 5rem; height: 5rem;" role="status">
<span class="sr-only">Loading...</span>
</div>`;
}
When i put data on Grid:当我将数据放在网格上时:
ngAfterViewInit(): void {
this.importService.getPlan().subscribe((data: Plan[]) => {
this.rowData = data;
}, error => {
this.httpError = error;
this.onBtHide();
});
}
My OnGriReady function:我的 OnGriReady function:
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
// this.rowClassRules = {
// 'rowError': function (params) {
// console.log(params.params.data.ANF);
// const numSickDays = params.data.ANF;
// return numSickDays > 24 && numSickDays <= 43;
// }
// };
}
Anything I do work.我做什么工作。 I try to do this rule, but nothing again.我尝试执行此规则,但没有再次执行。 I put my CSSs attributes on style.css and component.css我将 CSS 属性放在 style.css 和 component.css
pls Help me.请帮助我。
Put the class in style.css and pass it to the gridOptions:将 class 放入 style.css 并传递给 gridOptions:
// all rows assigned CSS class 'my-green-class'
gridOptions.rowClass = 'my-green-class';
// use the condition on the row based on the data in side the param
gridOptions.getRowClass = function(params) {
if (params.data.ANF > 24 && numSickDays <= 43) {
return 'my-shaded-effect';
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.