作者:lifetime8_797 | 来源:互联网 | 2022-12-02 15:32
我在Angular 6应用程序中使用的是“ AG Grid”社区版。
我现在面临的挑战是:我有一个相当简单的数据结构,其中的一个列表绑定到网格上进行显示。基于其值,我想在网格中添加“操作”列,以使用户可以访问某些操作,例如删除条目,“升级”它等。
对于单独的数据绑定列,当绑定时,我会获得每一行的相应数据值,例如,可以使用单元格渲染器格式化显示。我希望能够与“动作”列(未绑定到该类的特定数据元素)做类似的事情-但看来我的“动作单元格渲染器”没有任何基础它的决定。
我有一个像这样的数据结构:
export interface Indicator {
Id: string;
Name: string;
IsGlobal: boolean;
}
这些数组Indicators
被绑定到OnInit
我的Angular组件的功能中的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 '' +
'';
}
else
{
return '';
}
}
}
];
我希望能够在我的列定义中定义,只有当当前有问题的行的数据具有时,我的操作列才会显示“升级条目”按钮IsGlobal = false
。我希望data
传递到单元格渲染器中的将是整个行数据对象(类型为Indicator
)-但这似乎并非如此。
如何确定列定义中“操作”列中显示哪些图标?
1> un.spike..:
上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
将包含所需功能的自定义内容,依此类推。
您将无法执行component
抛出cellRenderer
内联实现的功能