自定义easyui默认Loading及数据为空提示

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以及数据为空提示已经完成，具体样式或需求可以按照这个思路自己进行修改；