我正在使用 ng2-smart-table 来自 https://akveo.github.io/ng2-smart-table/#/documentation
现场演示: http://akveo.com/ngx-admin/pages/tables/smart-table
请帮我解决以下问题:
我想选择多行并调用一个函数,所以我需要在 ng2-smart-table 的什么地方编写这段代码?
我可以选择多行并在所选行上调用一个函数吗?
我在 .ts 和 .html 文件中编写了以下代码:
智能表组件.ts:
actions: {
add: false,
edit: true,
delete: false,
custom: [{ name: 'ourCustomAction'}],
position: 'left',
columnTitle: 'Actions'
},
mode: 'external',
smart-table-component.html:
<nb-card-body>
<ng2-smart-table [settings]="settings" allowFiltering='true' allowPaging='true' [source]="windchillData"
(deleteConfirm)="onDeleteConfirm($event)" (custom)="onCustomAction($event)" (edit)="onEdit($event)">
</ng2-smart-table>
</nb-card-body>
最佳答案
1- 我想选择多行并调用一个函数,所以我需要在 ng2-smart-table 的什么地方编写这段代码?
答案:
要在 ng2-smart-table
中选择多行,您需要在 settings
对象中添加配置。
示例:
settings = {
// This `selectMode` is the configuration for selecting multiple rows in the table using checkbox
selectMode: 'multi',
delete: {
confirmDelete: true,
deleteButtonContent: 'Delete data',
saveButtonContent: 'save',
cancelButtonContent: 'cancel'
},
add: {
confirmCreate: true,
},
edit: {
confirmSave: true,
},
columns: {
// columns configuration
},
};
2- 我可以选择多行并在所选行上调用一个函数吗?
ng2-smart-table
有一个事件来获取 userSelectedRows
,我们可以使用该事件来获取所有选定的行,然后调用一个函数来对所有行进行处理选定的行。
示例:
- 第一步:在模板中添加事件处理器
<ng2-smart-table [settings]="settings" allowFiltering='true' allowPaging='true' [source]="windchillData" (deleteConfirm)="onDeleteConfirm($event)" (custom)="onCustomAction($event)" (edit)="onEdit($event)" (userRowSelect)="onUserRowSelect($event)"></ng2-smart-table>
- 第 2 步:在
component.ts
中创建事件处理程序以获取选定的行
onUserRowSelect(event) {
this.selectedRows = event.selected;
}
- 第 3 步:创建按钮并调用函数对选定的行执行操作
html
中的按钮
<button (click)="onClick()"> Get Selected </button>
component.ts
中的点击处理程序
onClick() {
// It will console all the selected rows
console.log(this.selectedRows);
}
在这里你可以看到这个在工作:https://stackblitz.com/edit/example-ng2-smart-table-18qsws
关于angular - 如何使用复选框在 ng2-smart-table 组件中选择多行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55482185/