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

あなたが答えを得たことは知っていますが、spin.js のようなライブラリを使用するのではなく、バニラ JS コードを使用してそれを行うことができると思います

必要なのは次のとおりです。1）ページの読み込み時に非表示になり、スピナーが中央に配置されたテーブルをカバーするdiv 2）保存/削除ボタンをクリックすると、divを表示できます。3）データを保存または削除する残りの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 に答える