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.

我有一个类似这样的数据结构:

I have a data structure something like this:

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

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

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

我将 AG 网格的列定义为:

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 =错误.我希望传递到单元格渲染器的 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?

推荐答案

on 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
}

因此要访问row-data，您需要使用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.

您将无法通过 cellRenderer 内联实现来执行 component 功能

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

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