简体   繁体   English

如何在 ng2-smart-table 中的自定义操作中执行 function?

[英]How to execute a function in custom action in ng2-smart-table?

I am trying to implement ng2 smart table to handle my pivot tables but I ran into the following confusion: Add custom actions for each record in the table and I have to make it so that when I click on that action I execute a function which I can't find how to do.我正在尝试实现 ng2 智能表来处理我的 pivot 表,但我遇到了以下困惑:为表中的每条记录添加自定义操作,我必须这样做,以便当我单击该操作时,我执行 function,我找不到怎么办。

custom actions自定义操作

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

Html Html

<nb-card-body>
   <ng2-smart-table [settings]="settings" [source]="source">
   </ng2-smart-table>
</nb-card-body>

For custom actions you need to hook (custom) event对于自定义操作,您需要挂钩(自定义)事件

<nb-card-body>
  <ng2-smart-table [settings]="settings" [source]="source" (custom)="onCustomEvent($event)">
  </ng2-smart-table>
</nb-card-body>

In your.ts you can use a switch to run functions depending on the value of event.action and use the row data as event.data在 your.ts 中,您可以使用开关根据event.action的值运行函数,并将行数据用作event.data

onCustomEvent(event) {
  switch (event.action) {
    case 'documento':
      this.doSomething(event.data);
      break;
    case 'editar':
      this.anotherFunction(event.data);
      break;
  }
}

You can do like this:你可以这样做:

Custom actions: (in ts file)自定义操作:(在 ts 文件中)

  settings = {
    add: {
      addButtonContent: '+',
      createButtonContent: 'OK',
      cancelButtonContent: 'X',
      confirmCreate: true,
    },
    edit: {
      editButtonContent: '<i class="nb-edit"></i>',
      saveButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
      confirmSave: true,
    },
    delete: {
      deleteButtonContent: '<i class="nb-trash"></i>',
      confirmDelete: true,
    },
    columns: {...},
  };

Confirm methods: (in ts file)确认方法:(在ts文件中)

onCreateConfirm(event: any): void {...};
onCreateConfirm(event: any): void {...};
onCreateConfirm(event: any): void {...};

HTML: HTML:

<ng2-smart-table
      [settings]="settings" [source]="source"
      (createConfirm)="onCreateConfirm($event)"
      (editConfirm)="onSaveConfirm($event)"
      (deleteConfirm)="onDeleteConfirm($event)">
    </ng2-smart-table>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM