如何更改 ag Grid 中的 overlayLoadingTemplate？

Question

我正在使用 Ag Grid v11.0 和 angular 1.x。渲染网格后，我想做一个动作（例如：保存网格项目）更改 overlayLoadingTemplate 属性以显示不同的消息（例如：正在保存...请稍候 ）。

$scope.save = save;

var _overlayLoadingTemplate = '<span class="ag-overlay-loading-center">Please wait while your items are loading</span>';
var _overlaySaveTemplate = '<span class="ag-overlay-loading-center">Saving...</span>';

$scope.gridOptions = {
  columnDefs: columnDefs,
  rowData: [/*stuff*/],
  overlayLoadingTemplate: _overlayLoadingTemplate,
};

function save () {
  $scope.gridOptions.overlayLoadingTemplate = _overlaySaveTemplate;

  $scope.gridOptions.api.showLoadingOverlay();

  /* call service and get response logic here */

  $scope.gridOptions.api.hideOverlay();
}

---

overlayLoadingTemplate 属性未更改，是初始属性：_overlayLoadingTemplate。我没有找到像 setOverlayLoadingTemplate

这样的设置方法

Answer 1

恐怕无法以您想要的方式更新叠加层。 Loading Overlay 和 No Rows Overlay 可以从默认值更改，但这是在初始化时完成的，不能再次更改。

如果您希望显示特定于应用程序的叠加层，恐怕您需要自己提供一个实现。

Answer 2

这是可能的。我需要在主从场景中更改子网格的覆盖模板中的文本。

在您的叠加模板中，创建占位符元素，您可以将其替换为就在调用showLoadingOverlay

之前的内容

$scope.save = save;

var _overlayLoadingTemplate = '<span class="ag-overlay-loading-center"><span id="js-overlay-text">Please wait while your items are loading...</span></span>';

$scope.gridOptions = {
  columnDefs: columnDefs,
  rowData: [/*stuff*/],
  overlayLoadingTemplate: _overlayLoadingTemplate,
};

function save () {

  document.getElementById("js-overlay-text").innerText = "Saving...";
  $scope.gridOptions.api.showLoadingOverlay();

  /* call service and get response logic here */

  $scope.gridOptions.api.hideOverlay();
}