Question

问题摘要-

我正在将ag-grid-angular与服务器端行模型一起使用来延迟加载树数据。但是我有2个不同的API调用来加载父数据和子数据。问题是当我多次展开和折叠父行时，rowData被弄乱了，就像看到一些空白一样，并且展开折叠也无法正常工作。

我已经尝试过的内容-我调试了代码，发现第一次扩展任何父行时，都会发生一个后端调用来加载子行，但是下次我扩展同一父行时，它将从缓存中获取子详细信息。此外，父行和子行之间存在rowIndex的重复。我也尝试清除缓存，但是没有用。

代码-我的代码类似于this URL.中给出的代码，不同之处在于我们拥有一台真实的服务器，并且从父行和子行的2个不同的API调用中动态获取数据。而在URL上给出的示例中，它们只有一个data.json文件，从中加载父行和子行都会超时。

代码如下所示-HTML如下所示：

<ag-grid-angular
            #agGrid class="ag-theme-fresh ag-fresh"
            [gridOptions]="agGridOptions"
            [columnDefs]="columnDefs"
            [defaultColDef]="defaultColDef"
            [autoGroupColumnDef]="autoGroupColumnDef"
            [rowModelType]="rowModelType"
            [treeData]="true"
            [animateRows]="true"
            [isServerSideGroup]="isServerSideGroup"
            [getServerSideGroupKey]="getServerSideGroupKey"
            (gridReady)="onGridReady($event)"
          ></ag-grid-angular>

TS文件-//设置网格选项：

        this.agGridOptions = {
              pagination: true,
              paginationPageSize: 100,
              rowHeight: 40,
              columnDefs: [],
              headerHeight: 45,
              suppressContextMenu: true,
              enableSorting: true,
              icons: {
                groupExpanded: '<span class="ag-icon ag-icon-small-down"></span>',
                groupContracted: '<span class="ag-icon ag-icon-small-right"></span>'
              }
            };

            this.columnDefs = agGridConfig.columnDefs;
            this.defaultColDef = {
              filter: true,
              sortable: true,
              resizable: true
            };
            this.autoGroupColumnDef = {
              headerName: 'Name',
              field: 'name',
              width: 350
            };
            this.rowModelType = "serverSide";
            this.isServerSideGroup = function (item) {
              return item.group;
            };
            this.stateService.register('grids', this.gridOptions.name);
            this.getServerSideGroupKey = function (item) {
              let childParam: any = {
                id: item.id,
                date: item.date
              };
              return childParam;
            };

        onGridReady(params: GridOptions) {
            this.agGridRef = params;
            let datasource = this.createServerSideDatasource(this.apiService);
            params.api.setServerSideDatasource(datasource);
          }

        createServerSideDatasource(apiService: ApiService) {
            function ServerSideDatasource(apiService: ApiService) {
              this.apiService = apiService;
            }

            ServerSideDatasource.prototype.getRows = (params) => {
              let parentDataset: any;
              let queryParam: any;
              if (params.request.groupKeys && params.request.groupKeys.length > 0) {
                let parDataSets: any = params.request.groupKeys;
                if (parDataSets && parDataSets.length > 1) {
                  parentDataset = parDataSets[ parDataSets.length - 1 ];
                } else {
                  parentDataset = parDataSets[ 0 ];
                }
                queryParam = this.service.getChildParams(parentDataset);
                apiService.get<any, any>(‘childDatasetURL’, queryParam).subscribe(response => {
                  let rows = response.data;
                  params.successCallback(rows, rows.length);
                });
              } else {
                this.showSpinner = true;
                queryParam = this.service.getParentParams();
                apiService.get<any, any>('parentDatasetURL’, queryParam).subscribe(response => {
                  let rows = response.data;
                  params.successCallback(rows, rows.length);
                  this.showSpinner = false;
                });
              }
            };
            return new ServerSideDatasource(apiService);
          }

    ParentDatasetURL.json - {
          "messages": [],
          "data": [
            {
              "id": 1,
              "name": "parent1"
            },
            {
              "id": 2,
              "name": "parent2"
            }
          ]
        }
    ChildDatasetURL.json - {
          "messages": [],
          "data": [
            {
              "id": 3,
              "name": "parent1child"
            },
            {
              "id": 4,
              "name": "parent2child"
            }
          ]
        }

实际结果-树数据最初几次可以很好地扩展和折叠，但后来却不能正确地扩展和折叠，并且rowData显示之间存在一些空白，并且rowIndex被弄乱了。

预期结果-父级应该正确扩展以延迟加载子数据，即使多次打开也是如此。同样，在折叠行时，rowData应该正确关闭而不会造成任何混乱。

Answer 1

我遇到了同样的问题。

我发现这是由于getServerSideGroupKey中返回的值不是唯一的。在确保该值对于所有行而言都是唯一的之后，问题得以解决。

使用“ ag-grid-angular”服务器端行模型延迟加载树数据，当多行扩展和折叠时，行数据被弄乱了

1 个答案: