ag-grid表头单元格添加图标
时间: 2023-09-06 20:08:15 浏览: 58
你可以通过自定义表头单元格组件来实现在表头添加图标。以下是一个示例:
1. 创建一个自定义表头组件,例如 MyHeaderComponent:
```javascript
import {Component} from '@angular/core';
@Component({
selector: 'app-my-header-component',
template: `
<div class="ag-cell-label-container" role="presentation">
<span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>
<div ref="eLabel" class="ag-header-cell-label" role="presentation">
<span ref="eText" class="ag-header-cell-text" role="columnheader">{{ params.displayName }}</span>
</div>
</div>
`
})
export class MyHeaderComponent {
params: any;
}
```
2. 在你的表格组件中,使用 `headerComponentFramework` 属性将自定义表头组件应用到表头:
```javascript
import {Component} from '@angular/core';
import {GridOptions} from 'ag-grid-community';
import {MyHeaderComponent} from './my-header-component.component';
@Component({
selector: 'app-my-grid-component',
template: `
<ag-grid-angular [gridOptions]="gridOptions"></ag-grid-angular>
`
})
export class MyGridComponent {
gridOptions: GridOptions = {
columnDefs: [
{
headerName: 'Column 1',
field: 'col1',
headerComponentFramework: MyHeaderComponent,
headerComponentParams: {
menuIcon: 'fa-bars'
}
},
{
headerName: 'Column 2',
field: 'col2'
}
]
};
}
```
在这个示例中,我们将 `MyHeaderComponent` 应用到了第一列的表头中。可以看到,在 `MyHeaderComponent` 的模板中,我们添加了一个 `span` 元素,该元素引用了一个 CSS 类 `ag-header-icon`,这个类可以用来设置表头中的图标样式。
你还可以通过 `headerComponentParams` 属性传递参数给 `MyHeaderComponent`,以便在组件中使用这些参数。在这个示例中,传递了一个 `menuIcon` 参数,用来设置表头中的菜单图标。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)