在 Angular 2 的 ng2-smart-table
中,我想在操作列中添加一个新按钮,通过单击此按钮,它将路由到另一个页面。
此代码具有添加、编辑和删除按钮。我试着像这样制作新按钮,但它不起作用:
settings = {
add: {
addButtonContent: '<i class="ion-ios-plus-outline"></i>',
createButtonContent: '<i class="ion-checkmark" ></i>',
cancelButtonContent: '<i class="ion-close"></i>',
confirmCreate: true
},
edit: {
editButtonContent: '<i class="ion-edit"></i>',
saveButtonContent: '<i class="ion-checkmark"></i>',
cancelButtonContent: '<i class="ion-close"></i>',
confirmSave: true
},
delete: {
deleteButtonContent: '<i class="ion-trash-a"></i>',
confirmDelete: true
},
如何添加按钮?我搜索了 documentation我找不到与此相关的任何内容。
最佳答案
在我的列表组件中
actions: {
columnTitle: 'Actions',
add: false,
edit: false,
delete: true,
custom: [
{ name: 'viewrecord', title: '<i class="fa fa-eye"></i>'},
{ name: 'editrecord', title: ' <i class="fa fa-pencil"></i>' }
],
position: 'right'
},
然后在模板中
<ng2-smart-table class="table table-hover" [settings]="settings" [source]="dataSet"
(deleteConfirm)="onDeleteConfirm($event)" (custom)="onCustomAction($event)">
</ng2-smart-table>
此函数帮助我决定要执行的自定义操作。
onCustomAction(event) {
switch ( event.action) {
case 'viewrecord':
this.viewRecord(event.data);
break;
case 'editrecord':
this.editRecord(event.data);
}
}
public editRecord(formData: any) {
this.modalRef = this.modalService.open(AddProfileComponent);
this.modalRef.componentInstance.formData = formData;
this.modalRef.result.then((result) => {
if (result === 'success') {
this.loadData();
}
}, (reason) => {
});
}
public viewRecord(formData: any) {
this.modalRef = this.modalService.open(ViewProfileComponent);
this.modalRef.componentInstance.formData = formData;
this.modalRef.result.then((result) => {
if (result === 'success') {
this.loadData();
}
}, (reason) => {
});
}
关于angular - 在 Angular 2 的 ng2-smart-table 的操作列中添加自定义按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40572979/