JS-easyui 扩展easyui.datagrid，添加数据loading遮罩效果代码

1. (function (){
2. $.extend($.fn.datagrid.methods, {
3. //显示遮罩
4. loading: function(jq){
5. return jq.each(function(){
6. $(this).datagrid("getPager").pagination("loading");
7. var opts = $(this).datagrid("options");
8. var wrap = $.data(this,"datagrid").panel;
9. if(opts.loadMsg)
10. {
11. $("<div class="datagrid-mask"></div>").css({display:"block",width:wrap.width(),height:wrap.height()}).appendTo(wrap);
12. $("<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});
13. }
14. });
15. }
16. ,
17. //隐藏遮罩
18. loaded: function(jq){
19. return jq.each(function(){
20. $(this).datagrid("getPager").pagination("loaded");
21. var wrap = $.data(this,"datagrid").panel;
22. wrap.find("div.datagrid-mask-msg").remove();
23. wrap.find("div.datagrid-mask").remove();
24. });
25. }
26. });
27. })(jQuery);

用方法

1. $("#dataGrid").datagrid("loadData",(function (){
2. $("#dataGrid").datagrid("loading");
3. return [];//[]需要加载的数据
4. })());

在datagrid的事件onLoadSuccess中添加

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

1. //采用jquery easyui loading css效果
2. function ajaxLoading(){
3. $("<div class="datagrid-mask"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");
4. $("<div class="datagrid-mask-msg"></div>").html("正在处理，请稍候。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});
5. }
6. function ajaxLoadEnd(){
7. $(".datagrid-mask").remove();
8. $(".datagrid-mask-msg").remove();
9. }
10. $.ajax({
11. type: 'POST',
12. url: 'sendLettersAgain.action',
13. data: {id:obj.id},
14. beforeSend:ajaxLoading,\发送请求前打开进度条
15. success: function(robj){
16. ajaxLoadEnd();\任务执行成功，关闭进度条
17. }
18. }）;

1. //显示进度条
2. function showProcess(isShow, title, msg) {
3. if (!isShow) {
4. $.messager.progress('close');
5. return;
6. }
7. var win = $.messager.progress({
8. title: title,
9. msg: msg
10. });
11. }
12. //弹出框以及系统消息框
13. function showMsg(title, msg, isAlert) {
14. if (isAlert !== undefined && isAlert) {
15. $.messager.alert(title, msg);
16. } else {
17. $.messager.show( {
18. title : title,
19. msg : msg,
20. showType : 'show'
21. });
22. }
23. }
24. //确认框
25. function showConfirm(title, msg, callback) {
26. $.messager.confirm(title, msg, function(r) {
27. if (r) {
28. if (jQuery.isFunction(callback))
29. callback.call();
30. }
31. });
32. }