easyui.datagrid 확장 및 데이터 로딩 마스크 효과 code_jquery 추가

사용하는 과정에서 easyui에 아직 일부 작은 기능이 부족하거나 열리지 않은 것을 발견했습니다.

DataGrid 플러그인을 예로 들면 데이터 로딩은 원격 및 로컬 데이터 로딩의 두 가지 방법을 제공하지만, 원격 데이터를 로드할 때만 데이터 로드의 마스크 레이어가 표시되고 데이터 로드가 완료된 후에 마스크 레이어가 숨겨지지만 로컬 데이터가 로드될 때는 마스크가 나타나지 않습니다. 로딩 속도가 매우 빠르고 마스크를 사용하지 않습니다

하지만 실제 프로젝트 개발 과정에서 url 메소드를 사용하여 데이터를 로딩하는 것을 고려하지 않았고, loadData 메소드를 사용하여 로드했습니다. 이때 사용자에게 현재 데이터를 로드하고, easyui의 데이터그리드 코드를 분석하고, 원격 데이터를 로드할 때 마스크 표시 코드를 잘라내고, 코드를 확장하도록 마스크 레이어를 표시해야 합니다.

코드 복사 코드는 다음과 같습니다.

//jquery.datagrid 확장
(함수(){
$.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)
$("

").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")
}


작가:드림체이서 20101030 사무실