添加自定义动作按钮- ng2-smart-table

基础概念

ng2-smart-table 是一个基于 Angular 的智能表格组件，它提供了丰富的功能来展示和处理表格数据。自定义动作按钮是 ng2-smart-table 中的一个功能，允许你在表格的每一行添加自定义的操作按钮，以实现特定的业务逻辑。

类型

自定义动作按钮可以是以下几种类型：

编辑按钮：用于编辑当前行的数据。
删除按钮：用于删除当前行的数据。
查看详情按钮：用于查看当前行的详细信息。
自定义操作按钮：根据业务需求自定义的操作按钮。

应用场景

自定义动作按钮广泛应用于各种需要表格展示和操作的业务场景，例如：

管理后台的用户管理、订单管理等。
数据分析平台的数据筛选、导出等。
电商平台的商品管理、库存管理等。

示例代码

以下是一个简单的示例，展示如何在 ng2-smart-table 中添加自定义动作按钮：

import { Component } from '@angular/core';
import { SmartTableData } from 'ng2-smart-table';

@Component({
  selector: 'app-custom-actions',
  templateUrl: './custom-actions.component.html',
})
export class CustomActionsComponent {
  settings = {
    actions: {
      columnTitle: 'Actions',
      custom: [
        { name: 'edit', title: '<i class="fa fa-edit"></i>' },
        { name: 'delete', title: '<i class="fa fa-trash"></i>' },
      ],
      add: false,
    },
    columns: {
      id: {
        title: 'ID',
        type: 'number',
      },
      name: {
        title: 'Name',
        type: 'string',
      },
    },
  };

  source: SmartTableData = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
  ];

  onCustomAction(event) {
    switch (event.action) {
      case 'edit':
        console.log('Edit', event.data);
        break;
      case 'delete':
        console.log('Delete', event.data);
        break;
    }
  }
}