web-dev-qa-db-ja.com

ng2-smart-tableのアクション列にカスタムボタンを追加angular 2

ng2-smart-tableでangular 2アクション列に新しいボタンを追加し、このボタンをクリックして別のページにルーティングします。これは追加、編集、削除ボタンですが、このような新しいボタンを作成しようとしましたが、機能していません

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

、どのようにボタンを追加できますか、ng2-smartテーブルドキュメントで検索し、これに関連するものを見つけることができません https://akveo.github.io/ng2-smart-table/documentation =

angulartypescriptng2-bootstrap
15
Yousef Al Kahky

それを試してみてください：

列の設定で、1つの列「アクション」を追加します。

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

設定ファイルに、次を入力します

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

これで、imgを含むカスタムrouteToAPageボタンができました。

次に、ng2-smart-tableタグで、

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

その後、ルート関数を作成し、必要なことを実行できます。

6
ggb

リストコンポーネント内

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

次に、テンプレートで

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

私は同じ問題を抱えていて、次の例に基づいてカスタムアクションで解決策を見つけました： basic-example-custom-actions.component

設定：

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

テンプレートで：アクションによって呼び出される関数を定義します

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

ルーターが必要です：

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

その後、別のページにリダイレクトできます：

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

ユーザーが行をクリックしても同じことが適用できます。

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

それでも解決策を探している場合は、同じ問題にぶつかり、解決できませんでした。

リリースに戻す 1.1. （from package.json）が私のためにやった！また、buttonContentタグが編集および削除では正常に機能するが、追加では機能しないことも発見しました。

このバグがすぐに修正されることを願っています。

1
Alex

Htmlテンプレートでは、削除イベントの編集をサブスクライブできます。

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

onEdit onDeleteは、何かを変更するためのカスタム関数になりました。

これがお役に立てば幸いです！

0
newan