webentwicklung-frage-antwort-db.com.de

hinzufügen einer benutzerdefinierten Schaltfläche in der Aktionsspalte in ng2-smart-table angle 2

in ng2-smart-table angle 2 möchte ich eine neue taste in der aktionsspalte hinzufügen und durch klick auf diese taste wird sie zu einer anderen seite weitergeleitet. Dies sind die Schaltflächen zum Hinzufügen, Bearbeiten und Löschen, aber ich habe versucht, die neue Schaltfläche zu erstellen so aber es funktioniert nicht 

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
    },

, wie kann ich die Schaltfläche hinzufügen, habe ich in der Ng2-Smart-Tabellendokumentation gesucht, und ich kann nichts finden, das mit diesem Thema zusammenhängt https://akveo.github.io/ng2-smart-table/documentation

angulartypescriptng2-bootstrap
13
Yousef Al Kahky

Fügen Sie in Ihre Einstellungsdatei Folgendes ein

actions: {
  edit: false, //as an example
  custom: [{ name: 'routeToAPage', title: `<img src="/icon.png">` }]
}

Jetzt haben Sie eine benutzerdefinierte routeToAPage-Schaltfläche mit einem img. 

Dann in Ihrem ng2-smart-table-Tag

<ng2-smart-table [settings]="settings" [source]="dataSource" (custom)="route($event)"></ng2-smart-table>

Dann können Sie eine Routenfunktion erstellen und tun, was sie tun muss. 

4
ggb

Versuch es: 

Fügen Sie in Ihrer Spalteneinstellung eine Spalte "Aktionen" hinzu: 

  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'
  },
4
nam do

Ich hatte das gleiche Problem und fand die Lösung mit einer benutzerdefinierten Aktion anhand des folgenden Beispiels: basic-example-custom-actions.component

die Einstellungen :

actions: {
  add: false,
  edit: false,
  delete: false,
  custom: [{ name: 'ourCustomAction', title: '<i class="nb-compose"></i>' }],
  position: 'right'
},

In der Vorlage: definieren wir die von unserer Aktion aufgerufene Funktion

<ng2-smart-table #ourTable [settings]="settings" [source]="source"
    (custom)="onCustomAction($event)">

Wir brauchen den Router:

import {Router} from '@angular/router';
...
constructor(private router: Router) {}

Dann können wir auf eine andere Seite umleiten:

onCustomAction(event) {
  // alert(`Custom event '${event.action}' fired on row №: ${event.data.id}`);
  this.router.navigate(['pages/ourPage']);
}

Dasselbe kann angewendet werden, wenn ein Benutzer auf eine Zeile klickt:

(userRowSelect)="onCustomAction($event)"
2
DependencyHell

Falls Sie immer noch nach einer Lösung suchen, bin ich auf das gleiche Problem gestoßen und konnte es nicht beheben. 

Wiederherstellen auf Version 1.1.0 (von Ihnen package.json) tat es für mich! Ich entdeckte auch, dass das buttonContent-Tag gut für Edit und Delete funktioniert, aber nicht für Add.

Hoffentlich wird dieser Fehler bald behoben.

1
Alexander Hayek

In der HTML-Vorlage können Sie das Ereignis zum Bearbeiten und Löschen abonnieren:

<ng2-smart-table [settings]="settings" [source]="source" (edit)="onEdit($event)" (delete)="onDelete($event)"></ng2-smart-table>

onEdit onDelete sind jetzt Ihre benutzerdefinierten Funktionen, um etwas zu ändern.

ich hoffe das hilft!

0
newan

In meiner Listenkomponente

actions: {
      columnTitle: 'Actions',
      add: false,
      edit: false,
      delete: true,
      custom: [
      { name: 'viewrecord', title: '<i class="fa fa-eye"></i>'},
      { name: 'editrecord', title: '&nbsp;&nbsp;<i class="fa  fa-pencil"></i>' }
    ],
      position: 'right'
    },

Dann in der Vorlage

  <ng2-smart-table class="table table-hover" [settings]="settings" [source]="dataSet"
   (deleteConfirm)="onDeleteConfirm($event)"  (custom)="onCustomAction($event)">
  </ng2-smart-table>

Diese Funktion half mir zu entscheiden, welche benutzerdefinierte Aktion ausgeführt werden soll.

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) => {
      });
    }
0
David Njuguna