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);
}
};
|