gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 21:18:52 27 4
gpt4 key购买 nike

在我的农业网格的每一行中。我需要在每一行 ag-grid 中添加 Angular Material 图标按钮。但是,结果只显示了文本按钮。它不会在我的农业网格中显示我的图标按钮。

接下来,我需要在我的 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"}
]

}

以下是我的打印画面 enter image description here

最佳答案

这个问题有 3 个部分。

1.启用多选:

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

2。启用选择复选框:

保留 checkboxSelection: true对于第一个ColDef ,您已经在做。

3.每行添加 Angular Material 图标按钮

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

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

Since cellRenderer expects html string in return, you should not simply provide <mat-icon>home</mat-icon> as it won't get compiled.

关于angular - AG-GRID 无法将图标按钮添加到我的 ag-grid 中的 ag-grid 和多选复选框的每一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53908460/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com