使用Angular 8中的param函数动态更改ag-grid的单元格渲染器

查理

有人可以帮我这个忙吗?我在Angular 8中使用ag-Grid,其中有一列将单元格渲染器作为单个按钮(比如说Delete按钮),但是当网格触发cellValueChange事件时,即当特定单元格值更改时,我想要删除按钮单元格渲染器要替换为其他单元格渲染器。

这是我在做什么

columnDefs: {

    headerName: 'Delete'
    cellRenderer: (params: ICellRendererParams) => {
        return getCellRenderer(params);
    }
}

getCellRenderer(params)
{
    if (params.value.isEdit)
        return 'updateRenderer';
    else
        return 'deleteRenderer';
}

isEdit 是网格中的隐藏列,该事件的值在事件调用时设置为1,否则默认情况下,所有行的值均为0。

因此,此函数应返回渲染器。我已经创建了frameworkComponent,如下所示:

frameworkComponent: {
    deleteRenderer: DeleteRendererComponent,
    updateRenderer: UpdateRendererComponent
} 

现在,当我提供cellRenderer:'deleteRenderer'时,我得到了正确的组件。但是,当我通过函数调用它时,只有字符串被打印为deleteRenderer,而不是组件。

在此先感谢您的帮助。

Pratik Bhat

我建议您将两个单元格渲染器合并为一个,并根据可以作为cellRenderer参数传递的字段的值来决定操作

像这样-

cellRenderer: 'commonRenderer'
cellRendererParams: {
  editable : "isEdit" // pass the field value here
}

在单元格渲染器组件内部,您可以agInit像这样访问内部的此可编辑参数-

agInit(params: any) : void {
    params.editable // here
}

现在,您可以基于此传递的参数值来分支更新/删除逻辑。

单元格渲染器组件示例

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

JTree单元格渲染器问题

来自分类Dev

Kendo Grid:与Angular一起使用时,如何从组合框单元格模板中获取所选项目

来自分类Dev

自定义单元格渲染器

来自分类Dev

如何在ag网格单元格渲染器中的纸图标按钮中注册点按?

来自分类Dev

ag-grid:在一行中使用多个组单元格渲染

来自分类Dev

如何更改Angular渲染器值

来自分类Dev

AG-Grid React,麻烦自定义单元格渲染器在数据更改时进行更新。功能组件的行为与类组件不同

来自分类Dev

Angular Ag-Grid:如何在单元格中呈现HTML?

来自分类Dev

在ag-Grid单元格编辑器中使用自定义指令时,在writeValue()之前调用focus事件

来自分类Dev

当与Angular材质选项卡一起使用时,Ag-Grid单元格渲染器无法正确显示按钮

来自分类Dev

在pe:sheet中添加自定义单元格渲染器

来自分类Dev

在使用JComboBox作为单元格编辑器的JTable单元格中编辑焦点

来自分类Dev

使用Kendo编辑器中的值更新Kendo Grid选定的单元格值

来自分类Dev

单元格渲染器和失去的焦点

来自分类Dev

列表视图和使用自定义渲染器查看单元格的单元重用问题

来自分类Dev

JTable使用动态大小设置列宽,并使用JTextArea作为单元格渲染器

来自分类Dev

如何使用cellClass函数在UI Grid中突出显示唯一单元格?

来自分类Dev

将不同的JList添加到JTable中的单元格渲染器

来自分类Dev

Angular UI Grid API在捕获最后的单元格编辑中不起作用

来自分类Dev

Angular UI Grid不更新单元格中的指令

来自分类Dev

使用Angular更改单元格的背景颜色

来自分类Dev

使用 grid() 将 LabelFrame 中的单元格居中

来自分类Dev

如何将过滤器应用于 ag 网格中的单元格渲染器

来自分类Dev

聚合物 3 的 ag-grid 中的动态单元格渲染

来自分类Dev

使用 Angular4 渲染器在新行中渲染字符串的每个元素

来自分类Dev

在 Ag Grid 中动态更改或设置单元格类别

来自分类Dev

是否可以使用 <input type="file"/> 制作 AG Grid 自定义单元格编辑器

来自分类Dev

如何使用来自渲染器函数的记录作为编辑器 ExtJs Grid 中组合的存储

来自分类Dev

折叠使用 vuejs 渲染的表格中的空单元格

Related 相关文章

  1. 1

    JTree单元格渲染器问题

  2. 2

    Kendo Grid:与Angular一起使用时,如何从组合框单元格模板中获取所选项目

  3. 3

    自定义单元格渲染器

  4. 4

    如何在ag网格单元格渲染器中的纸图标按钮中注册点按?

  5. 5

    ag-grid:在一行中使用多个组单元格渲染

  6. 6

    如何更改Angular渲染器值

  7. 7

    AG-Grid React,麻烦自定义单元格渲染器在数据更改时进行更新。功能组件的行为与类组件不同

  8. 8

    Angular Ag-Grid:如何在单元格中呈现HTML?

  9. 9

    在ag-Grid单元格编辑器中使用自定义指令时,在writeValue()之前调用focus事件

  10. 10

    当与Angular材质选项卡一起使用时,Ag-Grid单元格渲染器无法正确显示按钮

  11. 11

    在pe:sheet中添加自定义单元格渲染器

  12. 12

    在使用JComboBox作为单元格编辑器的JTable单元格中编辑焦点

  13. 13

    使用Kendo编辑器中的值更新Kendo Grid选定的单元格值

  14. 14

    单元格渲染器和失去的焦点

  15. 15

    列表视图和使用自定义渲染器查看单元格的单元重用问题

  16. 16

    JTable使用动态大小设置列宽,并使用JTextArea作为单元格渲染器

  17. 17

    如何使用cellClass函数在UI Grid中突出显示唯一单元格?

  18. 18

    将不同的JList添加到JTable中的单元格渲染器

  19. 19

    Angular UI Grid API在捕获最后的单元格编辑中不起作用

  20. 20

    Angular UI Grid不更新单元格中的指令

  21. 21

    使用Angular更改单元格的背景颜色

  22. 22

    使用 grid() 将 LabelFrame 中的单元格居中

  23. 23

    如何将过滤器应用于 ag 网格中的单元格渲染器

  24. 24

    聚合物 3 的 ag-grid 中的动态单元格渲染

  25. 25

    使用 Angular4 渲染器在新行中渲染字符串的每个元素

  26. 26

    在 Ag Grid 中动态更改或设置单元格类别

  27. 27

    是否可以使用 <input type="file"/> 制作 AG Grid 自定义单元格编辑器

  28. 28

    如何使用来自渲染器函数的记录作为编辑器 ExtJs Grid 中组合的存储

  29. 29

    折叠使用 vuejs 渲染的表格中的空单元格

热门标签

归档