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