在ng2-smart-table angular 2的actions列中添加自定义按钮

Question

在ng2-smart-table angular 2我想在actions列中添加一个新按钮,点击这个按钮它将路由到另一个页面,这是添加,编辑和删除按钮,但我试图制作这样的新按钮但是它不起作用

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智能表文档中搜索,我找不到任何与此相关的内容https://akveo.github.io/ng2-smart-table/documentation

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

Answer 2

在您的设置文件中，放入以下内容

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>

然后，您可以创建路由功能并执行所需的操作。

Answer 3

我遇到了同样的问题，并根据以下示例找到了带有自定义操作的解决方案：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)"

编辑：如果您需要自定义样式，请使用以下示例：

添加到 component.css

默认编辑，删除 div 占用空间。我们必须删除该空间，以便我们的自定义按钮将在相应的表格行中进行调整。

:host ::ng-deep .ng2-smart-actions ng2-st-tbody-edit-delete {display: none !important;}

:host ::ng-deep ng2-st-tbody-custom a.ng2-smart-action.ng2-smart-action-custom-custom {
    display: inline-block;
    width: 80px;
    text-align: center;
    padding-top: 10px;
}

Answer 4

在我的列表组件中

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