时间戳

首页 > 解决方案 > 单击数据表行中的按钮时弹出模式

angular - 单击数据表行中的按钮时弹出模式

问题描述

我正在使用 angular 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
    };
  }
}

单击查看按钮时如何弹出模式

标签： angulardatatabledatatablesangular8angular-datatables

解决方案

简而言之，您必须在模态调用按钮中添加一个类名，然后在 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

推荐阅读