EasyUI datagrid添加loading遮罩效果

来源：互联网发布：自拍走红网络编辑：程序博客网时间：2024/05/18 00:01

实现遮罩效果：

function EasyUILoad() {        $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: "auto !important" }).appendTo("body");        $("<div class=\"datagrid-mask-msg\"></div>").html("<img  class ='img1' /> 正在运行，请稍候。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });    }    function dispalyEasyUILoad() {        $(".datagrid-mask").remove();        $(".datagrid-mask-msg").remove();    }

在后台请求过程中显示遮罩效果

 function checkRegist(index,opinion){       EasyUILoad(); //显示效果        $('#dgRegistuser').datagrid('selectRow',index);        var row = $('#dgRegistuser').datagrid('getSelected');        if(row){            var registerId = row.id;            $.ajax({                type : "POST",                url :ctx +  '/applyList/approve',                data : {                    registerId : registerId,                    opinion : opinion                },                dataType : "json",                success : function(result) {                    dispalyEasyUILoad(); //隐藏效果                    if(result  == true){                        $.messager.alert('提示', '审批完成！', 'info', function() {                            $('#dgRegistuser').datagrid('reload');                        }); // 弹出提示框                    }else{                        $.messager.alert("警告","审批出错,请稍后重试");                    }                }            });        }    }

阅读全文

0 0