ajouter un bouton personnalisé dans la colonne actions de ng2-smart-table angulaire 2
dans ng2-smart-table angulaire 2 je veux ajouter un nouveau bouton dans la colonne actions et par cliquez sur ce bouton, il va itinéraire vers une autre page c'est de l'ajouter , modifier et supprimer des boutons, mais j'ai essayé de faire le nouveau bouton comme ceci mais ça ne fonctionne pas
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
},
, Comment puis-je ajouter le bouton , j'ai cherché dans la documentation de la table intelligente ng2 et je ne trouve rien à ce sujet https://akveo.github.io/ng2-smart-table/documentation
5 réponses
dans votre fichier de paramètres, mettez ce qui suit
actions: {
edit: false, //as an example
custom: [{ name: 'routeToAPage', title: `<img src="/icon.png">` }]
}
Maintenant vous avez un bouton routeToAPage personnalisé avec un img.
Puis dans votre ng2-smart-table balise
<ng2-smart-table [settings]="settings" [source]="dataSource" (custom)="route($event)"></ng2-smart-table>
ensuite, vous pouvez créer une fonction route et faire ce qu'elle doit faire.
Essaie ça:
dans vos paramètres de colonnes, ajoutez une colonne "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'
},
au cas où vous cherchez toujours une solution, j'ai rencontré le même problème et je n'ai pas pu le résoudre.
Revenir à la version 1.1.0 (de votre paquet.json) l'a fait pour moi! J'ai aussi découvert que la balise buttonContent fonctionne bien pour Edit et Delete mais pas pour Add.
espérons que ce bug sera bientôt corrigé.
j'ai eu le même problème et trouvé la solution avec une action personnalisée, basée sur l'exemple suivant : base-exemple-custom-actions.composante
paramètres:
actions: {
add: false,
edit: false,
delete: false,
custom: [{ name: 'ourCustomAction', title: '<i class="nb-compose"></i>' }],
position: 'right'
},
dans le modèle: nous définissons la fonction appelée par notre action
<ng2-smart-table #ourTable [settings]="settings" [source]="source"
(custom)="onCustomAction($event)">
Nous avons besoin du routeur :
import {Router} from '@angular/router';
...
constructor(private router: Router) {}
alors, nous pouvons rediriger vers une autre page :
onCustomAction(event) {
// alert(`Custom event '${event.action}' fired on row №: ${event.data.id}`);
this.router.navigate(['pages/ourPage']);
}
Même chose peut être appliquée lorsqu'un utilisateur clique sur une ligne :
(userRowSelect)="onCustomAction($event)"
Sur le modèle html vous pouvez vous abonner à éditer un événement de suppression:
<ng2-smart-table [settings]="settings" [source]="source" (edit)="onEdit($event)" (delete)="onDelete($event)"></ng2-smart-table>
onEdit onDelete sont maintenant vos fonctions personnalisées pour changer quelque chose.
j'espère que cela aide!