首页 > 代码库 > JS-easyui 扩展easyui.datagrid,添加数据loading遮罩效果代码
JS-easyui 扩展easyui.datagrid,添加数据loading遮罩效果代码
- (function (){
- $.extend($.fn.datagrid.methods, {
- //显示遮罩
- 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});
- }
- });
- }
- ,
- //隐藏遮罩
- 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);
用方法
- $("#dataGrid").datagrid("loadData",(function (){
- $("#dataGrid").datagrid("loading");
- return [];//[]需要加载的数据
- })());
在datagrid的事件onLoadSuccess中添加
- onLoadSuccess:function (){
- $("#dataGrid").datagrid("loaded");
- }
- //采用jquery easyui loading css效果
- function ajaxLoading(){
- $("<div class="datagrid-mask"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");
- $("<div class="datagrid-mask-msg"></div>").html("正在处理,请稍候。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});
- }
- function ajaxLoadEnd(){
- $(".datagrid-mask").remove();
- $(".datagrid-mask-msg").remove();
- }
- $.ajax({
- type: ‘POST‘,
- url: ‘sendLettersAgain.action‘,
- data: {id:obj.id},
- beforeSend:ajaxLoading,\发送请求前打开进度条
- success: function(robj){
- ajaxLoadEnd();\任务执行成功,关闭进度条
- }
- });
- //显示进度条
- function showProcess(isShow, title, msg) {
- if (!isShow) {
- $.messager.progress(‘close‘);
- return;
- }
- var win = $.messager.progress({
- title: title,
- msg: msg
- });
- }
- //弹出框以及系统消息框
- function showMsg(title, msg, isAlert) {
- if (isAlert !== undefined && isAlert) {
- $.messager.alert(title, msg);
- } else {
- $.messager.show( {
- title : title,
- msg : msg,
- showType : ‘show‘
- });
- }
- }
- //确认框
- function showConfirm(title, msg, callback) {
- $.messager.confirm(title, msg, function(r) {
- if (r) {
- if (jQuery.isFunction(callback))
- callback.call();
- }
- });
- }
JS-easyui 扩展easyui.datagrid,添加数据loading遮罩效果代码
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。