javascript - 如何更改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

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

在叠加层模板中，创建占位符元素，在调用 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();
}