问题
in ng2-smart-table angular 2 i want to add a new button in actions column and by click on this button it will route to another page this is the add , edit and delete buttons but i tried to make the new button like this but it's not working
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
},
, how can i add the button , i searched in ng2-smart table documentation and i can't find any thing related to this https://akveo.github.io/ng2-smart-table/documentation
回答1:
Try it:
In your columns setting, add one column "Actions":
Actions: //or something
{
title:'Detail',
type:'html',
valuePrepareFunction:(cell,row)=>{
return `<a title="See Detail Product "href="Your api key or something/${row.Id}"> <i class="ion-edit"></i></a>`
},
filter:false
},
Id: { //this Id to use in ${row.Id}
title: 'ID',
type: 'number'
},
回答2:
In your settings file, put the following
actions: {
edit: false, //as an example
custom: [{ name: 'routeToAPage', title: `<img src="/icon.png">` }]
}
Now you have a custom routeToAPage button with an img.
Then in your ng2-smart-table tag,
<ng2-smart-table [settings]="settings" [source]="dataSource" (custom)="route($event)"></ng2-smart-table>
Then you can create a route function and do what it needs to do.
回答3:
In my List component
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'
},
Then in the template
<ng2-smart-table class="table table-hover" [settings]="settings" [source]="dataSet"
(deleteConfirm)="onDeleteConfirm($event)" (custom)="onCustomAction($event)">
</ng2-smart-table>
This function helped me decide on what custom action to execute.
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) => {
});
}
回答4:
I had same problem, and found the solution with a custom action, based on following example : basic-example-custom-actions.component
settings :
actions: {
add: false,
edit: false,
delete: false,
custom: [{ name: 'ourCustomAction', title: '<i class="nb-compose"></i>' }],
position: 'right'
},
In the template : we define the function called by our action
<ng2-smart-table #ourTable [settings]="settings" [source]="source"
(custom)="onCustomAction($event)">
We need the router :
import {Router} from '@angular/router';
...
constructor(private router: Router) {}
Then, we can redirect to another page :
onCustomAction(event) {
// alert(`Custom event '${event.action}' fired on row №: ${event.data.id}`);
this.router.navigate(['pages/ourPage']);
}
Same thing can be applied when a user click on a row :
(userRowSelect)="onCustomAction($event)"
回答5:
In case you are still looking for a solution, I ran into the same problem and couldn't fix it.
Reverting to release 1.1.0 (from you package.json) did it for me! I also discovered that the buttonContent tag works fine for Edit and Delete but not for Add.
Hopefully this bug will get fixed soon.
回答6:
On html Template you can subscribe the edit an delete event:
<ng2-smart-table [settings]="settings" [source]="source" (edit)="onEdit($event)" (delete)="onDelete($event)"></ng2-smart-table>
onEdit onDelete are now your custom functions to change something.
i hope this helps!
来源:https://stackoverflow.com/questions/40572979/add-custom-button-in-actions-column-in-ng2-smart-table-angular-2