2

如果在某个地方回答了这个问题，我深表歉意，但我找不到。

我正在为 MS Dynamics CRM 开发可编辑的 javascript 网格，当用户单击网格上的“保存”按钮时，我试图显示加载屏幕（加载微调器应该只覆盖我的网格 - 这实际上是显示在内部的 HTML Web 资源CRM 窗口）。CRM 系统保存数据并重新加载我的网格大约需要 2-5 秒。所以我想在那段时间显示加载屏幕。

我找到了 spin.js http://spin.js.org/，它似乎很容易实现，但我没有意识到应该在什么事件上显示加载屏幕？

基本上，我有一个表格，当用户单击“保存”或“删除”按钮时，我希望表明引擎盖下发生了一些事情。

非常感谢您的时间和帮助！

4

2 回答 2

3

听起来你知道你想从 spin.js 调用什么，你只是想弄清楚从哪里调用它。您可以尝试将其添加到您的 javascript 中，其中“#saveButton”和“#deleteButton”是您想要触发脚本的按钮的 css 标识符。

    $("#saveButton").click(function(){
        displayLoadingPage();
    });

    $("#deleteButton").click(function(){
        displayLoadingPage();
    });

    function displayLoadingPage() {
        //call your spin.js code here.
    }

让我知道这是否回答了您的问题。

于 2016-05-16T14:28:49.973 回答
2

我知道你已经得到了答案，但我认为你可以使用 vanilla JS 代码而不是使用 spin.js 之类的库来做到这一点

您所需要的只是： 1）一个隐藏在页面加载时的 div 覆盖您的表格，其中微调器对齐中心 2）在保存/删除按钮上单击您可以使 div 可见。3）一旦您收到来自保存或删除数据的rest api的响应，再次隐藏div。

下面是 HTML：

<div class="container"> 
    <div id="loading" class="loading" onClick="hideSpinner()">
        Loading&#8230;     
    </div>
    <input type="button" value="save" / id="saveBtn" onClick="showSpinner()">
</div>

JS代码：

var loadingDiv = document.getElementById('loading');

function showSpinner() {
  loadingDiv.style.visibility = 'visible';
}

function hideSpinner() {
  loadingDiv.style.visibility = 'hidden';
}

这是一个演示：http ://codepen.io/AshutoshD/pen/dMEGqM

单击叠加层上的任意位置以将其关闭。

我已经使用了@MattIn4D 在这里创建的叠加层

于 2016-05-16T18:20:28.847 回答