0

我有一组数据需要在表中显示，对于相同的数据，我想在用户展开行时显示图形表示。我所取得的成就是表格中包含一些数据的可扩展行。我的代码如下：

abc.component.ts

import * as $ from 'jquery';
import 'datatables.net';

@Component({
  selector: 'app-abc',
  templateUrl: './abc.component.html',
  styleUrls: ['./abc.component.scss']
})
export class AbcComponent implements OnInit {
  @ViewChild('dataTable', { static: false })
  table!: { nativeElement: any; };

  dataTable: any;
  agentStatsData: TableData[] = [];

  ngOnInit(): void {
    this.getAllStatsData();
  }

  getAllStatsData(): void {
    this.dataService.getStatsData()
      .subscribe((data) => {
        this.agentStatsData = data;
        this.initTableData();
      });
  }

  initTableData() {
    var demoTable = this.dataTable.DataTable({
      "data": this.agentStatsData,
      "columns": [
        { "data": "name" },
        { "data": "type" },
        { "data": "team" },
        { "data": "status" },
        { "data": "totalStudent" },
        { "data": "totalActive" },
        { "data": "totalInActive" }
      ]
    });

    // Row expanding functionality
    $('.dataTable tr').on('click', function () {
      var tr = this;
      var row = demoTable.row(tr);

      if (row.child.isShown()) {
        row.child.hide();
      } else {
        row.child(format(row.data())).show();
      }
    });

    function format(data: any) {
      return '<div>' +
        '<p>Active data: ' + data.totalActive + '</p>' +
        '<p>Inactive data: ' + data.totalInActive + '</p>' +
        '<p>Total: ' + data.totalStudent + '</p>' +
        '</div>';
    }
  }
}

abc.component.html

...
<table width="100%" #dataTable class="table datatable-show-all dataTable table-striped table-responsive">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Team</th>
      <th>Status</th>
      <th>Total Student</th>
      <th>Active</th>
      <th>In Active</th>
    </tr>
  </thead>
</table>
...

可展开的行显示总活跃、总非活跃和总学生数据，但我想加载图表而不仅仅是数字。

4

1 回答 1

0

我使用了材料数据表，发现这个链接很有帮助。

于 2021-10-27T08:59:19.703 回答