AG-Grid：显示某些“动作”。网格中的按钮取决于条件 [英] AG-Grid: show certain "action" buttons in grid depending on condition

问题描述

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

I'm using the community edition of "AG Grid" in my Angular 6 application.

我现在的挑战是：我有一个相当简单的数据结构，其列表绑定到网格以进行显示。根据其值，我想在网格中添加操作列，以使用户可以访问某些操作，例如

My challenge right now is this: I have a fairly simple data structure, a list of which gets bound to the grid for display. Based on its values, I'd like to add an "Actions" column to the grid, to give the user access to certain actions, e.g. delete an entry, "promote" it etc.

对于单个数据绑定列，当绑定时，我会得到每一行的相应数据值，例如使用单元格渲染器设置显示格式。我希望我能够做到与动作列（未绑定到该类的特定数据元素）类似的操作-但看来我的动作单元格渲染器没有任何基础

For individual data-bound column, I get the corresponding data value of each row as it's being bound, and I can e.g. format the display using a cell renderer. I was hoping I'd be able to do soemthing similar with my "Actions" column (which isn't bound to a specific data element of the class) - but it seems my "action cell renderer" doesn't get anything to base its decisions on.

我有这样的数据结构：

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

这些指标的数组在Angular组件的 OnInit 函数中绑定到AG网格。

An array of these Indicators is being bound to the AG-grid in the OnInit function of my Angular component.

我定义了AG-grid的列为：

I define my column of the AG-grid to be:

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>';
            }
        }
    }
  ];

我希望能够在我的列定义中定义我的操作列显示促进条目按钮仅在的情况下当前有问题的行的数据具有 IsGlobal = false 。我希望将 data 传递到单元格渲染器中是整个行数据对象（类型为 Indicator ）-

I'd like to be able to define in my column definitions that my action column shows a "promote entry" button only IF the data of the row currently in question has IsGlobal = false. I was hoping the data being passed into the cell renderer would be the whole row data object (of type Indicator) - but that doesn't seem to be the case.

如何确定在动作列的列定义中显示哪些图标？

How can I decide which icons to show, in the "Actions" column, in my column definitions?

推荐答案

在 cellRenderer 上-您将获得 params 表示对象的值：

on cellRenderer - you will get params value which represents an object :

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
}

因此要访问行数据需要使用 params.data 或 params.node.data

So to get access to row-data you need to use params.data or params.node.data

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

但请记住，当您将使用内联 cellRenderer -时，您可以仅实现 HTML 模板（否逻辑），对于逻辑处理，您需要创建自定义 cellRenderer ，其中将包含所需的功能，依此类推。

But remember, when you will use inline cellRenderer - you can implement just HTML template (no logic), for logic handling you need to create custom cellRenderer which will contain needed functions and so on.

您将无法通过<$ c $执行组件函数c> cellRenderer 内联实现

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

这篇关于AG-Grid：显示某些“动作”。网格中的按钮取决于条件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！