Angular - ag-grid - 动态添加列

Posted 2023-03-28

【中文标题】Angular - ag-grid - 动态添加列

【英文标题】：Angular - ag-grid - add columns dynamically

【发布时间】：2019-03-01 07:11:27

【问题描述】：

我需要在 2 种情况下向我的 Ag-grid 添加一些列。其他情况我只需要基列。

所以在构造函数中我这样声明我的网格：

this.gridOption.columnDefs = [
  
        headerName: 'Admission date',
        field: 'admissionPlannedDate',
        cellRendererFramework: DateCellRendererComponent,
        cellRendererParams: (params) => 
          return (params.data.admissionPlannedDate ? dateFormat: 'dd.MM.yyyy - HH:mm' : dateFormat: ' ');
        ,
        cellStyle: function (params) 
          return (params.data.admissionPlannedDate < new Date() ? color: 'red' : );
        
      ,
      
        headerName: 'Lastname',
        field: 'lastName',
        cellStyle: function (params) 
          return (params.data.edsId === null ? color: 'orange' : );
        
        ,
      ,
      
        headerName: 'Sex',
        field: 'sex',
      ,
      
        headerName: 'Birthdate',
        field: 'birthDate',
        cellRendererFramework: DateCellRendererComponent,
        cellRendererParams: (params) => 
            return (params.data.birthDate ? dateFormat: 'dd.MM.yyyy' : dateFormat: ' ');
        ,
      ,
      
        headerName: 'Localisation',
        field: 'localisation',
      
];

然后在我的 ngOnInit 中，在某些情况下我需要将列添加到我的 ag-grid。

我尝试了以下方法：

 this.gridOption.columnDefs.push(
                
                  headerName: 'Block',
                  field: 'block',
                , 
                  headerName: 'SDS/Hosp',
                  field: 'sdsOrHosp'
                
              );
console.log(this.gridOption); //I see the new columns here so the add worked but i don't see them visual in my grid

也试过了

 this.gridOption.columnDefs.push( headerName: 'Bloc', field:'block');
 this.gridOption.columnDefs.push( headerName: 'SDS/Hosp', field:'SDSorHosp');

有人有想法吗？ 谢谢

【参考方案1】：

您不能只将新值推送到 columnDefs，我的意思是肯定可以，但在 ag-grid 的情况下，流程不像那样工作。

所以要实现你的目标（动态添加\删除columnDefs）你需要使用setColumnDefs(colDefs)方法

setColumnDefs(colDefs) 调用以将新的列定义设置到网格中。网格将重绘所有列标题，然后重绘所有行。

所以从逻辑上讲，您只需要创建新的列数组，然后调用this.gridOption.api.setColumnDefs(...)

【讨论】：

你知道我是否可以在 gridOption 2 others 列中添加 hide: true 然后在某些条件下设置 hide: false 吗？

是的，你可以这样做来设置隐藏属性

【参考方案2】：

如果您要动态添加的列是固定的，并且您想根据某些条件隐藏/取消隐藏这些列，您可以使用带有回调的 Hide 属性。

隐藏：真

【讨论】：

当我在 this.gridOption.api.getColumnDef('key').hide = false 之后执行此操作时；它不起作用，该列仍然隐藏

对我来说这可能是最简单的方法，而不是动态添加/删除列