jquery扩展easyui的datagrid组建，添加loading方法

来源：互联网发布：vscode tasks.json 编辑：程序博客网时间：2024/04/30 13:38

easyui可以说是轻量级的前端UI框架，在使用的过程中，发现easyui目前还缺少一些小功能或是未开放出来。拿datagrid插件来说，数据加载提供了两种方式远程和本地数据加载，但只有远程数据加载时才会显示数据加载的遮罩层，在数据加载完成后隐藏遮罩层；而本地数据加载时则不会出现遮罩，这应该是考虑到本地数据加载的速度很快则没有使用遮罩的必要。

1、扩展datagrid的loading、loaded方法：

(function () {      $.extend($.fn.datagrid.methods, {          //显示遮罩          loading: function (jq, msg) {              return jq.each(function () {                  var panel = $(this).datagrid("getPanel");                  if (msg == undefined) {                      msg = "正在加载数据，请稍候...";                  }                  $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: panel.width(), height: panel.height() }).appendTo(panel);                  $("<div class=\"datagrid-mask-msg\"></div>").html(msg).appendTo(panel).css({ display: "block", left: (panel.width() - $("div.datagrid-mask-msg", panel).outerWidth()) / 2, top: (panel.height() - $("div.datagrid-mask-msg", panel).outerHeight()) / 2 });              });          }  ,          //隐藏遮罩          loaded: function (jq) {              return jq.each(function () {                  var panel = $(this).datagrid("getPanel");                  panel.find("div.datagrid-mask-msg").remove();                  panel.find("div.datagrid-mask").remove();              });          }      });  })(jQuery);

使用方法：

_queryGrid.datagrid("loading","玩命加载。。。");_queryGrid.datagrid("loaded");

2、tab控件扩展loading和loaded方法：

(function () {      $.extend($.fn.tabs.methods, {          //显示遮罩          loading: function (jq, msg) {              return jq.each(function () {                  var panel = $(this).tabs("getSelected");                  if (msg == undefined) {                      msg = "正在加载数据，请稍候...";                  }                  $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: panel.width(), height: panel.height() }).appendTo(panel);                  $("<div class=\"datagrid-mask-msg\"></div>").html(msg).appendTo(panel).css({ display: "block", left: (panel.width() - $("div.datagrid-mask-msg", panel).outerWidth()) / 2, top: (panel.height() - $("div.datagrid-mask-msg", panel).outerHeight()) / 2 });              });          }  ,          //隐藏遮罩          loaded: function (jq) {              return jq.each(function () {                  var panel = $(this).tabs("getSelected");                  panel.find("div.datagrid-mask-msg").remove();                  panel.find("div.datagrid-mask").remove();              });          }      });  })(jQuery);

显示遮罩：$("#tabID").tabs("loading",msg) msg--要显示的信息

隐藏遮罩：$("#tabID").tabs("loaded")

0 0