AG-Grid：根据条件在网格中显示某些 "action" 按钮

Question

我在 Angular 6 应用程序中使用 "AG Grid" 的社区版。

我现在的挑战是：我有一个相当简单的数据结构，其中的列表绑定到网格以供显示。根据它的值，我想在网格中添加一个 "Actions" 列，让用户可以访问某些操作，例如删除一个条目，"promote" 它等

对于单个数据绑定列，我在绑定时获取每一行的相应数据值，例如，我可以使用 单元格渲染器 格式化显示。我希望我能够对我的 "Actions" 列（未绑定到 class 的特定数据元素）做类似的事情 - 但我的 "action cell renderer" 似乎没有'得到任何东西作为其决定的基础。

我有这样的数据结构：

export interface Indicator {
    Id: string;
    Name: string;
    IsGlobal: boolean;
}

在我的 Angular 组件的 OnInit 函数中，这些 Indicators 的数组被绑定到 AG 网格。

我将 AG 网格的列定义为：

columnDefs = [
    { headerName: 'Name', field: 'Name', width: 200, editable: true },
    { headerName: 'Global', field: 'IsGlobal', editable: false, width: 100,
      cellRenderer: (data) => { 
        // here, "data" refers to the "IsGlobal" value of the row being displayed
        if (data.value === true) {
          return 'Ja';
        } else {
          return 'Nein';
        }
      },
    },
    { headerName: 'Actions', width: 125,
        cellRenderer: (data) => {
            // here, I was hoping the "data" would refer to the entire
            // row / object being bound, so that I could check for 
            // certain conditions to be true (or false)
            if (data.IsGlobal.value === true) 
            {
                return '<span class="far fa-trash-alt mr-2" title="Delete entry"></span>' +
                       '<span class="fab fa-nintendo-switch" title="Promote entry"></span>';
            }      
            else
            {
                return '<span class="far fa-trash-alt mr-2" title="Delete"></span>';
            }
        }
    }
  ];

我希望能够在我的列定义中定义我的操作列显示一个 "promote entry" 按钮仅当当前有问题的行的数据有 IsGlobal = false。我希望传递到单元格渲染器的 data 将是整行数据对象（Indicator 类型）——但事实并非如此。

如何决定在我的列定义中的 "Actions" 列中显示哪些图标？

Answer 1

在 cellRenderer - 你会得到 params 代表一个对象的值：

interface ICellRendererParams {
    value: any, // value to be rendered
    valueFormatted: any, // value to be rendered formatted
    getValue: ()=> any, // convenience function to get most recent up to date value
    setValue: (value: any) => void, // convenience to set the value
    formatValue: (value: any) => any, // convenience to format a value using the columns formatter
    data: any, // the rows data
    node: RowNode, // row rows row node
    colDef: ColDef, // the cells column definition
    column: Column, // the cells column
    rowIndex: number, // the current index of the row (this changes after filter and sort)
    api: GridApi, // the grid API
    eGridCell: HTMLElement, // the grid's cell, a DOM div element
    eParentOfValue: HTMLElement, // the parent DOM item for the cell renderer, same as eGridCell unless using checkbox selection
    columnApi: ColumnApi, // grid column API
    context: any, // the grid's context
    refreshCell: ()=>void // convenience function to refresh the cell
}

因此，要访问 row-data，您需要使用 params.data 或 params.node.data

cellRenderer: (params) => {
    if (params.data.IsGlobal.value === true) 
    {
        ...
    }      
    else
    {
        ...
    }
}

但是记住，当你使用内联cellRenderer - 你可以只实现HTML模板（没有逻辑），对于逻辑处理，您需要创建自定义 cellRenderer ，其中将包含所需的功能等。

you wouldn't be able to execute component functions through cellRenderer inline implementation

AG-Grid：根据条件在网格中显示某些 "action" 按钮

AG-Grid: show certain "action" buttons in grid depending on condition

typescript

ag-grid

angular6