Extend Easyui.datagrid, add data loading mask effect code _jquery

In the process of use, found that Easyui is still missing some small functions or not open up

With the DataGrid plug-in, data loading provides two ways to load remote and local data, but only when remote data is loaded does the mask layer of data load be displayed, the mask layer is hidden after the data is loaded, and the mask is not present when the local data is loaded. This should be due to the fact that local data is loaded very quickly without the need to use a mask

However, in the actual project development process when used, did not consider using the URL way to load data, the use of the LoadData method to load data asynchronously, it is necessary to display a mask layer to prompt the user is currently loading data, analysis of the Easyui DataGrid Code, Cut out the remote data loading time mask display code, and expand the DataGrid method, the code is as follows:

Copy Code code as follows:

Jquery.datagrid extension
(function () {
$.extend ($.fn.datagrid.methods, {
Show Matte
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)
{
$ ("<div class=\" Datagrid-mask\ "></div>"). CSS ({display: "Block", Width:wrap.width (), Height:wrap.height ()}). Appendto (wrap);
$ ("<div class=\" datagrid-mask-msg\ "></div>"). 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
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);

How to use:

Copy Code code as follows:

$ ("#dataGrid"). DataGrid ("LoadData", (function () {
$ ("#dataGrid"). DataGrid ("Loading");
return [];//[] data that needs to be loaded
})());

Adding in the event onloadsuccess of the DataGrid

Copy Code code as follows:

Onloadsuccess:function () {
$ ("#dataGrid"). DataGrid ("loaded");
}

Writer: Chasing a dream guest 20101030 office