всплывающее окно материала сетки

Question

Как отобразить всплывающее окно в угловом материале 6 для ag-grid?

Answer 1

Вы можете создать собственный шаблон ячейки, используя Компоненты рендеринга ячейки ag-grid .Есть несколько примеров, на которые вы также можете сослаться.

Сначала вы создаете пользовательский компонент, который позволит вам отображать данные JSON.Мы

import {ICellRendererAngularComp} from "ag-grid-angular";

@Component({
  selector: 'custom-cell',
  template: `
    <button (click)="clicked($event)"></button>
  `
})
export class CustomCellComponent implements ICellRendererAngularComp {
  private params: any;
  public cell: any;

  agInit(params: any): void {
    this.params = params;
    console.log(params.value)
  }

  public clicked(cell: any): void {
    // show json data
    // open modal or popout
  }

  refresh(): boolean {
    return false;
  }
}

На вашем компоненте, который содержит основную ag-сетку, вам нужно будет импортировать вышеприведенные CustomCellComponent,

import { CustomCellComponent } from "./custom-cell.component";

И в ваших определениях столбцов назначьтепользовательский компонент для свойства cellRendererFramework.

{
  headerName: "Services Info",
  field: "servicesInfo",
  cellRendererFramework: CustomCellComponent,
}

Answer 2

Вы можете использовать cellRenderer в свойстве объекта columnDefs для создания / визуализации пользовательской ячейки.

Вы получите объект столбца Service Info из render.data.servicesInfo .

Затем получите конкретные данные из объекта и установите конкретные данные в HTML-шаблон.

export class ClientsStatusComponent implements OnInit {
            columnDefs = [
                {headerName: 'Site Id', field: 'siteId' },
                {headerName: 'Customer Name', field: 'customerName' },
                {headerName: 'Customer Number', field: 'customerNumber'},
                {headerName: 'Database Name', field: 'databaseName' },
                {headerName: 'Server Name', field: 'serverName' },
                {headerName: 'Services Info', field: 'servicesInfo'},
                {headerName: 'Services Status', field: 'servicesInfo',cellRenderer: 
                 render => {
                   return `    
                     <span>`+render.data.servicesInfo.apiServicesHealth[0].serviceName+`</span> 
                     &nbsp;&nbsp;&nbsp;&nbsp;
                     <span>`+render.data.servicesInfo.apiServicesHealth[0].serviceStatus+`</span>
                    `}
               }
            ];
            rowData: any;
            constructor(private http: HttpClient, private spinnerService: SpinnerService, private log: Log,
                private alertService: AlertService, private clientsStatusService: ClientsStatusService) {
            }

            ngOnInit() {
              this.loadClientStatus();
            }
                private loadClientStatus() {
                this.clientsStatusService.getClientsStatus().subscribe(
                    response => {
                        console.log(response);
                        debugger;
                        this.rowData = response.items;
                        return response;
                    },
                    errorRun => {
                        this.handleError('Error getting Applications.', errorRun)
                           // this.spinnerService.hide();
                    }
                );
            }

Answer 3

Событие cellClicked, использующее интерфейс CellClickedEvent, запускается при нажатии на ячейку.Это событие можно прослушать и получить данные из ячейки.Оттуда вы можете открыть пользовательский всплывающий редактор или любое всплывающее окно и передать данные, полученные из события, во всплывающее окно.Эти данные JSON могут быть отформатированы и отображены во всплывающем окне.

Шаблон будет выглядеть следующим образом -

<ag-grid-angular
     ...

     (cellClicked)="cellClicked($event)"

     ...
></ag-grid-angular>

В компоненте

public cellClicked(event: CellClickedEvent) {
  // Open popup here using the data
  alert(JSON.parse(event.data));
}

События приведены вдокументация здесь - https://www.ag -grid.com / javascript-grid-events / # selection

Чтобы отобразить его в той же строке, вы можете использовать пользовательское средство визуализации ячеек для анализаЗначение JSON и вернуть читаемую строку.Прочитайте о средствах визуализации ячеек здесь - https://www.ag -grid.com / javascript-grid-cell-Render-Components / # Cell-Renderer