2017-04-06 43 views
0

jQuery Bootgridを実装しました。私が実装したローダの表示と非表示を管理したい。jQuery Bootgrid bootgridがまだロードされているかどうかを確認する方法

ローダーは、$("#ajaxLoader").show();と$( "#ajaxLoader")hide();でそれぞれ表示され、非表示になっています。

そして、次のように私は私のBootgridの初期化が実装されています

var grid = $('#grid').on("load.rs.jquery.bootgrid", function() { 
    $("#ajaxLoader").show(); 
}).bootgrid({ 
    ajax: true, 
    ajaxSettings: { 
     method: "GET", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     cache: false 
    }, 
    searchSettings: { 
     delay: 500, 
    }, 
    url: myURL, 
    rowCount: [5, 10, 50, 75, 100, 200, -1] 
}).on("loaded.rs.jquery.bootgrid", function (e) { 
    $("#ajaxLoader").hide(); 
}); 

は今、これは正常に動作しますが、私は2つの方法でそれを最適化したい:

  1. Bootgridの検索機能は、それが自分だ持っているようですローダーは、検索が行われている場合、私のajaxローダーを表示しないための方法がありますか?

  2. 短いクエリでMyローダーが非常に迅速にポップアップして非表示になります。私はそれを遅らせることができる方法はありますか?オプション2は、おそらくそれ自身の上でオプション1を解決しますが、とにかく、ここで私はオプション2

    に関する試みたものですます解決

しかし私はそれが再び隠されることは決してありません、setTimeout(function() { $("#ajaxLoader").show(); }, 1000);を試してみました。私はsetTimeout(function() { $("#ajaxLoader").hide(); }, 1000)を使ってそれを解決しましたが、それは不必要に表示と非表示で点滅します。

理想的には、その機能を適用する前にBootgridがまだロードされているかどうかを確認する必要があります。

ローディングの問題を解決するにはどうすればよいですか?

編集:

私はまた私の load方法で私が言う loading変数に設定しようとしました

loading = true; 
setTimeout(function() { if (loading) { $("#ajaxLoader").show(); }}, 1000); 

を、私loadedイベントに次

setTimeout(function() { $("#ajaxLoader").hide(); }, loaderDelay); 

それでも私は同じ点滅エラーを私に与えました。

答えて

0

私はこのようなclearTimeout()機能を使用して、それを解く:

var showLoader; 

var grid = $('#grid').on("load.rs.jquery.bootgrid", function() { 
    showLoader = setTimeout(function() { $("#ajaxLoader").show(); }, 1000); 
}).bootgrid({ 
    ajax: true, 
    ajaxSettings: { 
     method: "GET", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     cache: false 
    }, 
    searchSettings: { 
     clearTimeout(showLoader); 
     delay: 500, 
    }, 
    url: myURL, 
    rowCount: [5, 10, 50, 75, 100, 200, -1] 
}).on("loaded.rs.jquery.bootgrid", function (e) { 
    $("#ajaxLoader").hide(); 
}); 
関連する問題