Question

在我的农业网格的每一行中。我需要在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"}
    ]

    }

以下是我的打印屏幕

Answer 1

这个问题分为三个部分。

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>，因为它不会被编译。

Answer 2

您当前正在使用呈现的字符串，您需要的是组件，也可以使用像this这样处理它的自定义类。但是，当您要渲染材质组件时，仍然需要编译materialbutton。

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

cellRendererFramework: RedComponentComponent,//your custom component

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

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

此组件将具有您的按钮代码，并将负责您的呈现。

我分叉了他们的演示，可以here来看看。

Answer 3

@Paritosh的完美解释。它对我有用。请参阅附带的屏幕截图。我添加了 HTML 方面

        <th mat-header-cell *matHeaderCellDef>Action</th>
        <td mat-cell *matCellDef="let element">
            <mat-icon (click)="item.remove()">edit</mat-icon>
            <mat-icon (click)="item.remove()">delete</mat-icon>
        </td>
    </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

并在类型脚本边添加

displayedColumns: string[] = ['position', 'name', 'weight', 'customColumn'];

Answer 4

尝试这种方法：

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

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

4 个答案: