AG-GRID 无法将图标按钮添加到我的 ag-grid 中的 ag-grid 和多选复选框的每一行

Posted 2023-03-28

【中文标题】AG-GRID 无法将图标按钮添加到我的 ag-grid 中的 ag-grid 和多选复选框的每一行

【英文标题】：AG-GRID unable to add icon button into each row of the ag-grid and multiselection checkbox in my ag-grid

【发布时间】：2019-05-23 07:45:54

【问题描述】：

在我的 ag-grid 的每一行中。我需要在 ag-grid 的每一行中添加角度材质图标按钮。但是，结果只显示了文本按钮。它不会在我的 ag-grid 中显示我的图标按钮。

接下来，我需要在我的 ag-grid 中设置多选复选框。但是，在我的 ag-grid 中只能选择一行。如何在 ag-grid 列表中实现多选行。

以下是我的源代码。

  constructor()  
      this.gridOptions = <GridOptions>
          paginationPageSize: 18,
          animateRows: true,
    ;
      this.gridOptions.columnDefs = [
        
            field: "",
            width: 110,
            checkboxSelection: true
        ,
        
            headerName: "Distributor Code",
            field: "dist_code",
            width: 330,
            sortingOrder: ["asc", "desc"]
        ,
        
            headerName: "Distributor Name",
            field: "dist_name",
            width: 330,
            sortingOrder: ["asc", "desc"]
        ,
        
            headerName: "Status",
            field: "status",
            width: 330,
            sortingOrder: ["asc", "desc"],

        ,
        
            field: "", 
            width: 110, 
            cellRenderer: function clickNextRendererFunc()
                    return '<button mat-stroked-button><mat-icon>keyboard_arrow_right</mat-icon></button>';
            
        
    ];
    this.gridOptions.rowData = [
        dist_code: 1, dist_name: "ABC Enterprise", status: "Inactive",
        dist_code: 2, dist_name: "Go Go Enterprise", status: "Active",
        dist_code: 3, dist_name: "Alibaba Enterprise", status: "Active",
        dist_code: 4, dist_name: "Silver Enterprise", status: "Active",
        dist_code: 5, dist_name: "George Enterprise", status: "Inactive",
        dist_code: 6, dist_name: "Kent Enterprise", status: "Active",
        dist_code: 7, dist_name: "NP Enterprise", status: "Active",
        dist_code: 8, dist_name: "ED Enterprise", status: "Inactive",
        dist_code: 9, dist_name: "DD Enterprise", status: "Active",
        dist_code: 10, dist_name: "DF Enterprise", status: "Active",
        dist_code: 11, dist_name: "JS Enterprise", status: "Active",
        dist_code: 12, dist_name: "JD Enterprise", status: "Inactive",
        dist_code: 13, dist_name: "KFC Enterprise", status: "Active",
        dist_code: 14, dist_name: "MCD Enterprise", status: "Inactive",
        dist_code: 15, dist_name: "AH Enterprise", status: "Active",
        dist_code: 16, dist_name: "PP Enterprise", status: "Active",
        dist_code: 17, dist_name: "KOH Enterprise", status: "Active",
        dist_code: 18, dist_name: "HH Enterprise", status: "Active",
        dist_code: 19, dist_name: "GG Enterprise", status: "Inactive",
        dist_code: 20, dist_name: "PP2 Enterprise", status: "Active"
    ]

    

以下是我的打印屏幕

【参考方案1】：

这个问题有 3 个部分。

1.启用多选：

您需要在ag-grid-angular 元素上具有此属性：rowSelection="multiple"

2.启用选择复选框：

将checkboxSelection: true 保留为第一个ColDef，您已经在这样做了。

3.在每一行添加角材质图标按钮

您需要使用 cellRenderer 并为此返回 html 字符串。

cellRenderer: (data) => 
    return `<mat-icon class="mat-icon material-icons mat-icon-no-color" role="img" aria-hidden="true">
       home</mat-icon>`;

由于cellRenderer 期望返回 html 字符串，因此您不应简单地提供 <mat-icon>home</mat-icon>，因为它不会被编译。

【讨论】：

应该是我的问题。非常感谢

【参考方案2】：

您当前正在使用呈现的字符串，您需要的是一个组件，或者您可以使用处理它的自定义类，如this。但是，当您要渲染材质组件时，您仍然需要编译材质按钮。

我建议您使用cellRendererFramework 并使用自定义组件， 创建名为RedComponentComponent 的自定义组件并像这样渲染它。

cellRendererFramework: RedComponentComponent,//your custom component

因此，您的单元格将如下所示

      
        headerName: "Value",
        field: "value",
        cellRendererFramework: RedComponentComponent,
        width: 100
      ,

这个组件会有你的按钮代码，它会负责你的渲染。

我fork了他们的demo，here你可以看看。

【讨论】：

@ChanYoongHon 你能分享你的stackblitz吗

为我工作！我用的是ag-grid-react，这个方案也可以用在react项目中！

@Justcode-sir 告诉我如何在 ag 网格的每一行中添加多个图标？

@Kapilsoni 你的意思是这样吗？ <icon></icon><icon></icon>

【参考方案3】：

试试这个方法：

 cellRenderer: params => 
          let eIconGui = document.createElement('span');         
            return  eIconGui.innerHTML = '<em class="material-icons">arrow</em>'  + ' ' + params.data.value;