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. }
时间: 2024-11-05 13:42:16

JS-easyui 扩展easyui.datagrid,添加数据loading遮罩效果代码的相关文章

扩展easyui.datagrid,添加数据loading遮罩效果代码 --来自网摘收集

//jquery.datagrid 扩展 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ return jq.each(function(){ $(this).datagrid("getPager").pagination("loading"); var opts = $(this).datagrid("options"); var wra

酷炫的css3图标loading动画效果代码

css3 svg图标制作环形loading加载动画特效 绿色的css3动画加载图标代码 css3加载动画制作loading加载Android动画效果 jQuery css3预加载动画制作css3动画图标页面加载效果 css3加载动画特效制作css3 win8加载动画特效 css3加载动画效果制作loading动画效果代码 8种超炫css3加载动画代码_css3 loading动画效果代码 5个CSS3加载动画_css3网页加载动画图标下载 css3 Loading加载动画制作动态Loading阶

EasyUI datagrid-export 将datagrid的数据导出至Excel-解决科学计数法

通过EasyUI datagrid-export.js 将datagrid的数据导出至Excel的时候,如果有类似身份证一样很长的数字,需要在后台返回数据的时候在数字前增加一个 “ ”,将数字转为字符串. <script type="text/javascript" src="../jquery-easyui-1.5.5.2/datagrid-export.js" ></script> function export_excel() { va

【转】扩展easyUI tab控件,添加加载遮罩效果

在easyui下自己生成遮罩效果的方法 (function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs("getSelected"); if (msg == undefined) { msg = "正在加载数据,请稍候..."; } $("<di

[读码][js,css3]能感知鼠标方向的图片遮罩效果

效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码随然不难,不过要能想到这个创意,并成功应用却很难! 另外,对于初学者,这也是不错的学习例子.含Jquery插件写法,css3等 英文教程:http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/源码下载:http://tympanus.net

easyui中的datagrid的数据加载的问题

我们在第一次使用easyui的datagrid的url加载所需的数据时,如果第二次加载数据我们使用的不是ulr而是数据返回结果进行加载的时候$("#div").datagird('loadData',data)就如同这样,我们是不能将最新的数据加载上的,表单加载的数据仍然是原来的数据,因为url还是原来的url,datagrid会按照原来的数据进行加载,这时候我们如果想要加载数据的时候可以使用$("#div").datagrid({url,"",

JS实现页面加载完毕之前loading提示效果

1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; 2.计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px) var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0, _LoadingLe

一个Loading 遮罩效果

首先在body的底部增加两个DIV 1 <div class="gdiv_over"></div> 2 <div class="gdiv_layout"> 3 <img id="gLoadingGif" src="loading.gif" title="正在处理,请稍后...." /> 4 </div> 第二步,把样式加在head <styl

ajax添加数据

一.用到数据库中的minzu表: 添加页面代码如下: <title>无标题文档</title> <script src="jquery-3.2.0.min.js"></script> </head> <body> <h1>添加数据</h1> <div>代号:<input type="text" id="code" /></