feat(table): 支持自定义加载动画 (#1893)

* fix(table): 修复加载数据时 loading 动画丢失的问题

* feat(table): 新增 loadingTemplet 选项

* refactor: loading 选项支持 string 类型

* update code

* test: 更新 table 用例

* docs(table): 新增 loading 选项最新文档说明

---------

Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>

docs/table/detail/options.md

@@ -298,10 +298,21 @@ height: function(){
 <td>loading</td>
 <td>
 
-是否显示加载条。若为 `false`，则在切换分页时，不会出现加载条。必须设置了 `url` 属性才生效。
+设置数据请求时的加载动画，需开启 `url` 选项才生效。
+
+- 若值为 `boolean` 类型，表示是否显示加载条，如：
+```
+loading: true // 显示默认加载条
+loading: false // 禁用加载条
+```
+
+- 若值为 `string` 类型 <sup>2.9.10+</sup>，表示自定义加载模板，此时可添加任意动画元素，如：
+```
+loading: '<i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i>'
+```
 
 </td>
-<td>boolean</td>
+<td>boolean<br>string</td>
 <td>
 
 `true`

examples/table-test.html

@@ -131,12 +131,16 @@ layui.use(['table', 'dropdown'], function(){
 
 
     // lineStyle: 'height: 95px;', // 行样式
-    css: [ // 自定义样式
+    css: [ // 对当前实例自定义样式
       '.layui-table-page{text-align: right;}',
-      '.layui-table-pagebar{float: left;}'
+      '.layui-table-pagebar{float: left;}',
+      // '.layui-table-init{background-color: rgba(255, 255, 255, 0.6);}'
     ].join(''),
     // className: '.demo-table-view',
 
+    // 自定义 loading 模板 --- 2.9.10+
+    // loading: '<i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 38px;"></i>',
+
     // size: 'sm',
     // skin: 'line',
     // even: true,

src/css/layui.css

@@ -1081,8 +1081,10 @@ hr.layui-border-black{border-width: 0 0 1px;}
 .layui-table-view .layui-form-checkbox[lay-skin="primary"] i{width: 18px; height: 18px; line-height: 16px;}
 .layui-table-view .layui-form-radio{line-height: 0; padding: 0;}
 .layui-table-view .layui-form-radio>i{margin: 0; font-size: 20px;}
-.layui-table-init{position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; z-index: 199;}
-.layui-table-init .layui-icon{position: absolute; left: 50%; top: 50%; margin: -15px 0 0 -15px; font-size: 30px; color: #c2c2c2;}
+.layui-table-init{position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: 0; z-index: 199; transition: opacity .1s; user-select: none; opacity: 1;}
+.layui-table-init.layui-hide-v{opacity: 0;}
+.layui-table-loading-icon{position: absolute; width: 100%\0; left: 50%; left:auto\0; top: 50%; margin-top: -15px\0; transform: translate(-50%, -50%); transform: none\0; text-align: center;}
+.layui-table-loading-icon .layui-icon{font-size: 30px; color: #c2c2c2;}
 .layui-table-header{border-width: 0; border-bottom-width: 1px; overflow: hidden;}
 .layui-table-header .layui-table{margin-bottom: -1px;}
 

src/modules/table.js

@@ -220,8 +220,14 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
 
     ,'<div class="layui-table-box">'
       ,'{{# if(d.data.loading){ }}'
-      ,'<div class="layui-table-init" style="background-color: #fff;">'
-        ,'<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>'
+      ,'<div class="layui-table-init">'
+        ,'<div class="layui-table-loading-icon">'
+        ,'{{# if(typeof d.data.loading === "string"){ }}'
+          ,'{{- d.data.loading}}'
+        ,'{{# } else{ }}'
+          ,'<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>'
+        ,'{{# } }}'
+        ,'</div>'
       ,'</div>'
       ,'{{# } }}'
 
@@ -910,7 +916,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       that.layMain.find('table').width('auto');
     }
 
-    that.loading(!0);
   };
 
   // 重置表格尺寸/结构
@@ -975,6 +980,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
     that.syncCheckAll();
     that.renderForm();
     that.setColsWidth();
+    that.loading(false);
   };
 
   // 初始页码
@@ -1001,6 +1007,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
     };
     var done = function(res, origin){
       that.setColsWidth();
+      that.loading(false);
       typeof options.done === 'function' && options.done(
         res, curr, res[response.countName], origin
       );
@@ -1045,7 +1052,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
         data = JSON.stringify(data);
       }
 
-      that.loading();
+      that.loading(true);
 
       $.ajax({
         type: options.method || 'get',
@@ -1740,20 +1747,12 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
   };
 
   // 请求 loading
-  Class.prototype.loading = function(hide){
+  Class.prototype.loading = function(show){
     var that = this;
     var options = that.config;
+
     if(options.loading){
-      if(hide){
-        that.layInit && that.layInit.remove();
-        delete that.layInit;
-        that.layBox.find(ELEM_INIT).remove();
-      } else {
-        that.layInit = $(['<div class="layui-table-init">',
-          '<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>',
-          '</div>'].join(''));
-        that.layBox.append(that.layInit);
-      }
+      that.layBox.find(ELEM_INIT).toggleClass(HIDE_V, !show); 
     }
   };