From ca56d0b333758397f34e21fae2cf779287c3a15a Mon Sep 17 00:00:00 2001
From: morning-star <26325820+Sight-wcg@users.noreply.github.com>
Date: Mon, 20 May 2024 00:29:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(table):=20=E6=94=AF=E6=8C=81=E8=87=AA?=
=?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB=20(#1893?=
=?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* 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 | 15 +++++++++++++--
examples/table-test.html | 8 ++++++--
src/css/layui.css | 6 ++++--
src/modules/table.js | 29 ++++++++++++++---------------
4 files changed, 37 insertions(+), 21 deletions(-)
diff --git a/docs/table/detail/options.md b/docs/table/detail/options.md
index 60c762f8..8cb3bd5c 100644
--- a/docs/table/detail/options.md
+++ b/docs/table/detail/options.md
@@ -298,10 +298,21 @@ height: function(){
| loading |
-是否显示加载条。若为 `false`，则在切换分页时，不会出现加载条。必须设置了 `url` 属性才生效。
+设置数据请求时的加载动画，需开启 `url` 选项才生效。
+
+- 若值为 `boolean` 类型，表示是否显示加载条，如：
+```
+loading: true // 显示默认加载条
+loading: false // 禁用加载条
+```
+
+- 若值为 `string` 类型 2.9.10+，表示自定义加载模板，此时可添加任意动画元素，如：
+```
+loading: ''
+```
|
-boolean |
+boolean
string |
`true`
diff --git a/examples/table-test.html b/examples/table-test.html
index 9941be3b..473d1800 100644
--- a/examples/table-test.html
+++ b/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: '',
+
// size: 'sm',
// skin: 'line',
// even: true,
diff --git a/src/css/layui.css b/src/css/layui.css
index b95b6d9c..30826b26 100644
--- a/src/css/layui.css
+++ b/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;}
diff --git a/src/modules/table.js b/src/modules/table.js
index 7b53b499..02071f61 100644
--- a/src/modules/table.js
+++ b/src/modules/table.js
@@ -220,8 +220,14 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
,''
,'{{# if(d.data.loading){ }}'
- ,' '
- ,' '
+ ,' '
+ ,' '
+ ,'{{# if(typeof d.data.loading === "string"){ }}'
+ ,'{{- d.data.loading}}'
+ ,'{{# } else{ }}'
+ ,''
+ ,'{{# } }}'
+ ,' '
,' '
,'{{# } }}'
@@ -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 = $([' ',
- '',
- ' '].join(''));
- that.layBox.append(that.layInit);
- }
+ that.layBox.find(ELEM_INIT).toggleClass(HIDE_V, !show);
}
};
|