javascript - 如何在主详细信息中基于服务器对数据进行分组 - 角度

Question

这是代码：https ://stackblitz.com/edit/ag-grid-angular-hello-world-jqmcvg?file=src/app/app.component.ts

list.component.ts

columnDefs = [
    {
      headerName: "Server",
      field: "server",
      cellRenderer: "agGroupCellRenderer"
    },
    { headerName: "Ping", field: "ping" },
    { headerName: "Download", field: "dl" },
    { headerName: "Upload", field: "ul" },
    { headerName: "ISPCon", field: "ispcon" },
    { headerName: "Date Start", field: "dateStart" },
    { headerName: "Date End", field: "dateEnd" }
  ];

  rowData = [
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 2",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 2",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    }
  ];
  detailCellRendererParams = {
    detailGridOptions: {
      columnDefs: [
        { field: "ping" },
        { field: "dl" },
        { field: "ul" },
        { field: "ispcon" },
        { field: "dateStart" },
        { field: "dateEnd" }
      ],
      onFirstDataRendered: function(params) {
        params.api.sizeColumnsToFit();
      }
    },
    getDetailRowData: function(params) {
      params.successCallback(params.data.callRecords);
    }
  };
  isRowMaster = function(dataItem) {
    return dataItem ? dataItem.callRecords.length > 0 : false;
  };

  paginationPageSize = 10;

  constructor() {}

  ngOnInit() {
    this.setAgGrid();
  }

  onFirstDataRendered(params) {
    params.api.sizeColumnsToFit();
    setTimeout(function() {
      params.api.getDisplayedRowAtIndex(1).setExpanded(true);
    }, 0);
  }

  onGridReady(event) {
    this.gridApi = event.api;
    this.setAgGrid();
  }
  setAgGrid() {}

list.component.html

<ag-grid-angular
  #agGrid 
  style="width: 100%; height: 500px;"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [rowData]="rowData"
  [paginationPageSize]="paginationPageSize"
  [masterDetail]="true"
  [detailCellRendererParams]="detailCellRendererParams"
      (firstDataRendered)="onFirstDataRendered($event)"
      [isRowMaster]="isRowMaster"
  [pagination]="true"
  [animateRows]="true"
  (gridReady)="onGridReady($event)"
  ></ag-grid-angular>

我在这里要做的是对“服务器”进行分组，例如服务器是“服务器 1”，它应该根据服务器名称对其进行分组并获取最新数据。

这是我在 Photoshop 上创建的示例图像。

提前致谢。

标签： javascriptangulartypescript