easyui.datagrid を拡張し、データ読み込みマスク効果 code_jquery を追加します。

使用する過程で、easyui にはまだいくつかの小さな機能が欠けているか、開かれていないことがわかりました。

datagrid プラグインを例に挙げると、データの読み込みにはリモートとローカルの 2 つのデータ読み込み方法が用意されています。データロードのマスクレイヤーはリモートデータのロード時にのみ表示され、データロードが完了するとマスクレイヤーは非表示になりますが、ローカルデータのロード時にはマスクは表示されません。読み込み速度は非常に速く、マスクは必要ありません

ただし、実際のプロジェクト開発プロセスで使用される場合、データの読み込みには url メソッドが考慮されず、loadData メソッドがデータの読み込みに使用されます。このとき、ユーザーはデータをロードして、easyui の datagrid コードを解析し、リモート データをロードするときにマスク表示コードを切り出し、datagrid メソッドを拡張しています。

コードをコピー コードは次のとおりです:

//jquery.datagrid extension
(function (){
$.extend($.fn.datagrid.methods , {
//ディスプレイマスク
loading: function(jq){
return jq.each( function(){
$(this).datagrid("getPager").pagination("loading");
var opts = $(this).datagrid("options");
var Wrap = $.data(this,"datagrid").panel;
if(opts.loadMsg)
{
$("

" ).css({display:"block",width:wrap.width(),height:wrap .height()}).appendTo(wrap); msg">

").html(opts.loadMsg).appendTo(wrap ).css({display:"block",left:(wrap.width()-$("div.datagrid-mask) -msg",wrap).outerWidth())/2,top:(wrap.height() -$("div.datagrid-mask-msg",wrap).outerHeight())/2});
}
});
}
,
//マスクフードを隠す
loaded: function(jq){
return jq.each(function(){
$( this).datagrid("getPager").pagination("loaded");
var Wrap = $.data(this,"datagrid").panel;
wrap.find("div.datagrid-mask- msg").remove();
wrap.find("div.datagrid-mask" ).remove();
});
}
});
})( jQuery);

使用法:

コードをコピー コードは次のとおりです:

$("#dataGrid").datagrid("loadData",(function (){
$("#dataGrid").datagrid("loading");
return [];/ /[]ロードするデータ
})());

datagrid イベント onLoadSuccess に

を追加します。 🎜> コードは次のとおりです。 onLoadSuccess:function ( ){

$("#dataGrid").datagrid("loaded"); }

ライター:Dream Chaser 20101030 事務局