Extended easyui. datagrid to add the data loading mask effect code _ jquery

Easyui is a lightweight front-end UI framework. It is updated to 1.2.1 to support more events. When methods and attributes are used, it is found that easyui still lacks some small functions or is not open.

Take the datagrid plug-in for example, data loading provides two methods for remote and local data loading. However, the data loading mask layer is displayed only when remote data is loaded, the mask layer is hidden after the data is loaded. The mask does not appear when the local data is loaded. This is necessary because the local data is not loaded quickly.

However, in actual project development, the loadData method is used to asynchronously load data without considering using the url method, at this time, it is necessary to display the mask layer to prompt that the user is loading data, analyze the datagrid code of easyui, extract the code displayed when the remote data is loaded, and expand the datagrid method, the Code is as follows:

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)
{
$ ("

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

"Maid ({display:" block ", left :( wrap. width ()-$ ("p. datagrid-mask-msg ", wrap ). outerWidth ()/2, top :( wrap. height ()-$ ("p. datagrid-mask-msg ", wrap ). outerHeight ()/2 });
}
});
}
,
// Hide the mask
Loaded: function (jq ){
Return jq. each (function (){
$ (This). datagrid ("getPager"). pagination ("loaded ");
Var wrap = $. data (this, "datagrid"). panel;
Wrap. find ("p. datagrid-mask-msg"). remove ();
Wrap. find ("p. datagrid-mask"). remove ();
});
}
});
}) (JQuery );

Usage:

The Code is as follows:

$ ("# DataGrid"). datagrid ("loadData", (function (){
$ ("# DataGrid"). datagrid ("loading ");
Return []; // [] data to be loaded
})());

Add

The Code is as follows:

OnLoadSuccess: function (){
$ ("# DataGrid"). datagrid ("loaded ");
}

Writer: Mengke 20101030 office