Extend easyui.datagrid and add data loading mask effect code_jquery

In the process of using it, I found that easyui still lacks some small functions or has not been opened

Take the datagrid plug-in as an example. Data loading provides two methods of remote and local data loading, but only when loading remote data. The mask layer of data loading will be displayed, and the mask layer will be hidden after the data loading is completed; while the mask will not appear when local data is loaded, this should be considered that the local data loading speed is very fast and the mask is not used. Necessary

However, when used in the actual project development process, the url method was not considered to load the data, and the loadData method was used to load the data asynchronously. At this time, it is necessary to display the mask layer to prompt The user is currently loading data, analyzing the datagrid code of easyui, cutting out the mask display code when loading remote data, and extending the datagrid method. The code is as follows:

Copy Code The code is as follows:

//jquery.datagrid extension
(function (){
$.extend($.fn.datagrid.methods , {
//Display mask
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});
}
});
}
,
//Hide mask hood
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);

Usage:

Copy code The code is as follows:

$("#dataGrid").datagrid("loadData",(function (){
$("#dataGrid").datagrid("loading");
return [];//[]Data to be loaded
})());

Add

in the datagrid event onLoadSuccess. Copy code The code is as follows:

onLoadSuccess:function ( ){
$("#dataGrid").datagrid("loaded");
}

writer:Dream Chaser 20101030 office