0

我按顺序使用了 2 个功能： 1. GetMetadata 2. GetTableData 使用元数据值准备和呈现表格。我想显示一个微调器“加载”，直到从服务器对表数据进行了整个提取。显示此微调器的最佳方式是什么？一旦获取数据并且表格准备就绪，它应该停止显示微调器。我正在使用 Jquery 来显示表格。

4

3 回答 3

0

从这里添加一个加载微调器https://loading.io/css/以data-count跟踪有多少功能不完整

<div id="loading" data-count="2" class="lds-dual-ring"></div>

然后，您的 JavaScript 将如下所示：

$.ajax({
         url:'your-GetMetadata-url',
         success:function(data){
           //prepare and render
           checkLoadingState();
         }
});

$.ajax({
         url:'your-GetTableData-url',
         success:function(data){
           //prepare and render
           checkLoadingState();
         }
});

//this function checks if all completed.
function checkLoadingState(){
  var $loader=$('#loading'),
      counter=Number($loader.data('count') -1);

  if(counter==0){ // all finished?
    $loader.hide();
  }else{
    $loader.data('count',counter);
  }
}
于 2020-04-27T07:59:19.533 回答
0

您可以创建一个由 html 和 css 组成的 loadingSpinner 页面/视图。可以在其上添加所需的设计和透明度更改。

您可以通过两种方式在 DOM 上呈现此视图：

  1. 在您的第一个 ajax 请求上渲染 DOM，当您收到相同的成功回调时，您可以结束它。再次为第二个请求渲染，以后再渲染。这可能会在 UI 上产生一些波动，因为依次有两个请求。为此，您可以尝试第二种方法。

  2. 在第一个 ajax 请求上渲染 DOM，并在收到最后一个序列的成功回调时关闭 loadingSpinner 页面。

于 2020-04-27T07:01:15.857 回答
0

从长远来看，您可能不需要 jQuery，LWC 可能拥有您提取数据、显示表格所需的一切......好吧，不会做漂亮的图表，但有很多示例如何链接外部库。

检查我在这里的回答是否会给你一些关于加载数据和微调器的想法：在 Salesforce LWC 中调用 Apex 时显示加载指示器

如果你有一个依赖调用的“菊花链”，并且你需要一个接一个的结果......在 Trailhead 上有很好的关于现代 JavaScript 的自定进度培训。它试图谈论您以前可能没有见过的一般“新”事物，但是当您想要使用 LWC 并帮助您理解许多示例时，它们会让您非常高效：https ://trailhead.salesforce.com/en/content/learn/模块/modern-javascript-development/write-asynchronous-javascript?trail_id=learn-to-work-with-javascript

如果您没有时间，只想快速而肮脏的示例 - 请查看：https ://salesforce.stackexchange.com/questions/255958/chain-wire-methods-together-in-lightning-web-components

于 2020-04-27T07:54:15.797 回答