如何在加载数据时隐藏 Ag-grid 中的所有行

Posted 2023-03-28

【中文标题】如何在加载数据时隐藏 Ag-grid 中的所有行

【英文标题】：how to hide all rows in Ag-grid while loading data

【发布时间】：2021-11-13 23:51:31

【问题描述】：

我正在使用"ag-grid-angular": "^25.3.0" 和"ag-grid-community": "^25.3.0"

从服务器加载数据时，在渲染网格前一秒，显示了一个空行。

在我发现的一些示例中，我看到他们在空行中添加了一个加载器 gif，但就我而言，我有一个 cellRendererFramework，它会在没有数据时显示默认数据。所以这不能与添加任何加载器一起工作。

我根本不希望显示该行。

有什么方法可以实现吗？

【问题讨论】：

用空数组初始化 rowData 变量。这应该工作

@DrashtiDobariya 它没有用

【参考方案1】：

Ag-grid 提供了一个内置的叠加层来显示何时加载数据。

方法：

// show 'loading' overlay
this.gridApi.showLoadingOverlay();

// show 'no rows' overlay
this.gridApi.showNoRowsOverlay();

// clear all overlays
this.gridApi.hideOverlay();

在正常情况下，我们不会调用这些方法，因为网格本身会为我们管理它。 但是，在某些情况下，例如您的情况，我们可以利用这种方法来发挥我们的优势。

在调用服务器获取数据之前调用this.gridApi.showLoadingOverlay() 方法。 得到服务器响应后，调用this.gridApi.hideOverlay();

private getData(): void 
    this.gridApi.showLoadingOverlay();
    this.http.get(url).subscribe(data => 
        // do something with data
        this.gridApi.hideOverlay();
    )

您还可以根据需要创建自定义叠加层。 （参考下面提到的链接）

缺点： 在这里，虽然网格体是有色的，但之前的行仍然显示。但是，既然得到响应后，我们添加新行，应该没问题。

更多详情，请阅读link

【讨论】：

我使用叠加层，叠加层的不透明度：0.5 这就是为什么我可以看到空行