单击数据表行中的按钮时弹出模式答案

【问题标题】：Pop-up modal when click button in data table row单击数据表行中的按钮时弹出模式
【发布时间】：2021-01-21 23:05:49
【问题描述】：

我正在使用角度 Next Angular 8 Free Admin Template ，当我单击数据表行中的按钮时，我需要显示模态。

下面可以看到代码

HTML代码

<div class="col-sm-12">
    <app-card cardTitle="Action" cardClass="card-datatable" [options]="false">
      <div class="table-responsive">
        <table datatable [dtOptions]="dtRouterLinkOptions" class="table table-striped table-bordered table-hover"></table>
      </div>
    </app-card>
  </div>

打字稿代码

export class TblDatatableComponent implements OnInit {
  dtRouterLinkOptions: any = {};

  constructor() { }

  ngOnInit() {
    this.dtRouterLinkOptions = {
      ajax: 'fake-data/datatable-data.json',
      columns: [{
        title: 'Name',
        data: 'name'
      }, {
        title: 'Position',
        data: 'position'
      }, {
        title: 'Office',
        data: 'office'
      }, {
        title: 'Age',
        data: 'age'
      }, {
        title: 'Start Date',
        data: 'date'
      }, {
        title: 'Salary',
        data: 'salary'
      }, {
        title: 'Action',
        render: function (data: any, type: any, full: any) {
          return '<button class="btn btn-outline-primary btn-sm">View</button>';
        }
      }],
      responsive: true
    };
  }
}

当我点击查看按钮时如何弹出一个模式

【问题讨论】：

标签： angular datatable datatables angular8 angular-datatables

【解决方案1】：

简而言之，您必须为您的模态调用按钮添加一个类名，然后在您的 ngOnInit 函数的 initComplete 函数中添加一个 onclick 事件像这样：

"initComplete": function() {
    $("#yourdatatable-id").on( "click", ".your_modal_calling_class", function () {
        // enable the modal here
    });
}

请同时查看initComplete的参考，那里有详细描述。

https://datatables.net/reference/option/initComplete

【讨论】：