ag-grid - Ag-grid 需要大量时间来显示多个 Cell Renderer 和 Value Getter

Question

我必须在对话框中呈现 ag-grid 表。

我的网格有多个cellRenderer, valueGetter and cellRendererParams。columnDefs我没有将服务器数据转换为rowData并field用于渲染，而是使用valueGetter从服务器数据中获取值，例如 valueGetter: 'data.screen1.graph.visible'.

我的 13 列 150 行的 ag-grid 需要花费大量时间来渲染。是因为valueGetter我的桌子需要时间来渲染吗？

以下是我的示例数据：

     private createColumnDefs() {
        this.columnDefs = [{
          headerName: 'Header1',
          cellRenderer: (params) => {
              return params.data.serverObject1.function === 'input' ? 'I' : 'O';
          },
          minWidth: 50,
          width: 70,
        }, {
          headerName: 'Header2',
          field: 'serverObject1.name',
          minWidth: 60,
          width: 80,
        }, {
          headerName: 'Header3',
          field: 'value',
          cellRenderer: 'valueFieldRenderer',
          minWidth: 100,
          width: 250,
        }, {
          headerName: 'Header4',
          cellRenderer: 'checkBoxRenderer',
          valueGetter: 'data.serverObject1.graph.visible',
          cellRendererParams(params) {
            return {
              disabledVal : params.data.localArray.length > 0 || params.data.attribute1 !== null
            };
          },
          minWidth: 70,
          width: 70,
        }, {
          headerName: 'Header5',
          cellRenderer: 'checkBoxRenderer',
          valueGetter: 'data.serverObject1.archive',
          cellRendererParams(params) {
            return {
              disabledVal : params.data.serverObject1.function === 'input'
            };
          },
          minWidth: 70,
          width: 70,
        }, {
          headerName: 'Header6',
          cellRenderer: 'checkBoxRenderer',
          valueGetter: 'data.serverObject1.alarm',
          cellRendererParams(params) {
            return {
              disabledVal : !((params.data.serverObject1.function === 'output') && (params.data.serverObject1.type === 'bool'))
            };
          },
          minWidth: 70,
          width: 70,
        },
          {
            headerName: 'Header7',
            cellRenderer: 'textBoxRenderer',
            valueGetter: 'data.serverObject1.active',
            minWidth: 150,
            width: 150,
          },
          {
            headerName: 'Header8',
            cellRenderer: 'textBoxRenderer',
            valueGetter: 'data.serverObject1.inactive',
            minWidth: 150,
            width: 150,
          },
          {
            headerName: 'Header11',
            cellRenderer: 'textBoxRenderer',
            valueGetter: (params) => params.data.text1,
            minWidth: 150,
            width: 150,
            cellStyle: (params) => {
              return (this.diagram === 'XYZ' &&
                !(params.data.serverObject1.function === 'output' || params.data.serverObject1.type === 'string'
                  || params.data.serverObject1.type === 'int')) ? {display: 'block'} : {display: 'none'};
            }}
        ];
      }

单元格渲染器：

    @Component({
      selector: 'app-check-box',
      template:
          `
        <input type="checkbox" [(ngModel)]="params.value" [id]="getID(params)" class="primary small"
               (change)="onChange($event)">
        <label [for]="getID(params)" class="text-hide">hidden</label>
      `,
      styleUrls: ['./test.component.css']
    })

    // tslint:disable-next-line:component-class-suffix
    export class CheckBoxRenderer implements AfterViewInit, ICellRendererAngularComp {

      private params: ICellRendererParams;

      constructor(private readonly translateService: TranslateService) { }

      agInit(params: ICellRendererParams): void {
        this.params = params;
      }

      public onChange(event) {
      }

      refresh(params: any): boolean {
        return false;
      }

      public getID(params): string {
        return params.column.colId + params.rowIndex;
      }

      afterGuiAttached(params?: IAfterGuiAttachedParams): void {
      }

      ngAfterViewInit(): void {
      }

      translate(key: string, params?: any): string {
        return this.translateService.instant(key, params);
      }
    }

我应该考虑转换为rowData以减少加载时间吗？

标签： ag-grid