Question

如何在ag-grid的角材料6中显示弹出窗口？

Answer 1

有一个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-rendering-components/#cell-renderer

Answer 2

您可以使用ag-grid的Cell Renderer Components创建自定义单元格模板。您也可以参考一些示例。

首先，创建一个自定义组件，该组件将允许您显示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-grid的组件上，您将需要导入上面的CustomCellComponent

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

然后在列定义中，将自定义组件分配给cellRendererFramework属性。

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

Answer 3

您可以在columnDefs对象属性中使用cellRenderer创建/渲染自定义单元格。

您将从 render.data.servicesInfo 中获得“服务信息”列对象。

然后从Object获取特定数据并在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();
                    }
                );
            }

农业网格材料弹出窗口

3 个答案: