如何更改 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();
}

如何更改 ag Grid 中的 overlayLoadingTemplate？

How to change the overlayLoadingTemplate in ag Grid?

javascript

angularjs

ag-grid