1 . 添加Loading遮罩层:
默认Loading效果较简单,想要改变时,需要自定义Loading;
2 . 自定义Loading:
//基本配置中定义
//无数据时显示的提示信息
var emptyHtml = '<div class="empty-data"><img src="/static/common/images/sus-empty.svg" alt="" class=""><p class="mt-20">暂无数据</p></div>';
// loading
var loadHtml = '<div class="loading-box"></div>';
var loadingStyle = `<style>
.datagrid-mask-msg {
background: rgb(0,0,0,0);
border-color: rgb(0,0,0,0);
border-radius: 1px !important;
border-style:none;
border-width:1px;
}
</style>`;
$('html').append(loadingStyle);
if ($.fn.datagrid) {
$.fn.datagrid.defaults.pageSize = pageSize;
$.fn.datagrid.defaults.pageList = pageList;
$.fn.datagrid.defaults.loadMsg = loadHtml;
$.fn.datagrid.defaults.emptyMsg = emptyHtml;
}
最好能封装,方便复用;
3 . loading动画及样式(loading根据自己实际需求编写,也可以使用GIF图):
/* 数据为空 */
.empty-data{margin-top:150px;text-align: center;}
/* loading动画 */
.loading-box {
width: 2px;
height: 2px;
border-radius: 1px;
box-shadow:0 -16px 0 4px black, /*上*/
0 16px 0 2px #333, /*下*/
-16px 0 0 1px #333, /*左*/
16px 0 0 2px #333, /*右*/
-12px -12px 0 1px #333, /*左上*/
12px -12px 0 3px #333, /*右上*/
-12px 12px 0 1px #333, /*左下*/
12px 12px 0 2px #333/*右下*/;
animation: loading 2s linear 0s infinite;
-webkit-animation: loading 2s linear 0s infinite;
-o-animation: loading 2s linear 0s infinite;
-moz-animation: loading 2s linear 0s infinite;
}
@keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes loading {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-o-keyframes loading {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
@-moz-keyframes loading {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
值得注意的是,数据为空提示不会先判断有无数据,会和loading一起出现
3 . 想要在真正无数据时提示数据为空,需要自己写方法覆盖源码,当然还有一个简单的方法,如下图 ↓ ;
总结:至此自定义loading以及数据为空提示已经完成,具体样式或需求可以按照这个思路自己进行修改;