[英]AG-GRID unable to add icon button into each row of the ag-grid and multiselection checkbox in my ag-grid
在我的 ag 网格的每一行中。 我需要在 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"}
]
}
这个问题有 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>
因为它不会被编译。
您当前正在使用呈现的字符串,您需要的是一个组件,或者您可以使用像这样处理它的自定义类。 但是,当您要渲染材质组件时,您仍然需要编译材质按钮。
我建议您使用cellRendererFramework
并使用自定义组件,创建名为RedComponentComponent
自定义组件并像这样渲染它。
cellRendererFramework: RedComponentComponent,//your custom component
所以,你的细胞看起来像这样
{
headerName: "Value",
field: "value",
cellRendererFramework: RedComponentComponent,
width: 100
},
这个组件会有你的按钮代码,它会负责你的渲染。
我分叉了他们的演示,在这里你可以看看。
试试这个方法:
cellRenderer: params => {
let eIconGui = document.createElement('span');
return eIconGui.innerHTML = '<em class="material-icons">arrow</em>' + ' ' + params.data.value;
}
@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>
并在Type Script端添加了
displayedColumns: string[] = ['position', 'name', 'weight', 'customColumn'];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.