diff --git a/gulpfile.js b/gulpfile.js
index 0e3e2ff..c5d2f2b 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -87,6 +87,7 @@ const paths = {
css:['src/css/*.css','node_modules/flatpickr/dist/themes/light.css'],
pluginsJs:[
'node_modules/jquery/dist/jquery.min.js',
+ 'node_modules/uuid/dist/umd/uuid.min.js',
'src/plugins/js/clipboard.min.js',
'src/plugins/js/spectrum.min.js',
'src/plugins/js/jquery-ui.min.js',
diff --git a/package.json b/package.json
index a44d610..908aa04 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
"rollup": "^2.32.1",
"rollup-plugin-terser": "^6.1.0",
"standard-version": "^8.0.2",
+ "uuid": "^8.3.2",
"vuepress": "^1.5.0",
"vuepress-plugin-baidu-autopush": "^1.0.1",
"vuepress-plugin-code-copy": "^1.0.6",
diff --git a/src/config.js b/src/config.js
index 5d13cdc..9e11d07 100644
--- a/src/config.js
+++ b/src/config.js
@@ -3,6 +3,7 @@
*/
export default {
container: "luckysheet", //容器的ID
+ loading:{}, //自定义loading
column: 60, //空表格默认的列数量
row: 84, //空表格默认的行数据量
allowCopy: true, //是否允许拷贝
diff --git a/src/controllers/constant.js b/src/controllers/constant.js
index 081e089..16f0a79 100644
--- a/src/controllers/constant.js
+++ b/src/controllers/constant.js
@@ -1575,11 +1575,107 @@ function menuToolBar (){
`;
}
-const luckysheetlodingHTML = function(){
- const _locale = locale()
- const info =_locale.info;
- return'';
+
+function customLoadingConfig() {
+ const _locale = locale();
+ const info = _locale.info;
+ const config = {
+ enable: true,
+ image: 'image://css/loading.gif',
+ text: info.loading,
+ viewBox: "32 32 64 64", // 只有为path时，才会使用
+ imageClass: '',
+ textClass: '',
+ customClass: ''
+ }
+ if (JSON.stringify(luckysheetConfigsetting.loading) !== '{}') {
+ Object.assign(config, luckysheetConfigsetting.loading);
+ }
+ return config;
+}
+
+const luckysheetloadingImage = function (config) {
+ if(typeof config.image==="function"){
+ return config.image()
+ }
+ const regE = new RegExp("^(image|path)://");
+ const regResult = regE.exec(config.image);
+ let imageHtml = '';
+ if (regResult !== null) {
+ const prefix = regResult[0];
+ const type = regResult[1];
+ const imageStr = regResult.input.substring(prefix.length);
+ switch (type) {
+ case "image":
+ imageHtml = ``;
+ break;
+ case "path":
+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+ svg.setAttribute("class", "path-type");
+ svg.setAttribute("viewBox", config.viewBox);
+ const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+ path.setAttribute("d", imageStr);
+ path.setAttribute("fill", "currentColor");
+ svg.appendChild(path);
+ imageHtml = svg.outerHTML;
+ break;
+ default:
+ break;
+ }
+ }
+ return imageHtml;
}
+
+const luckysheetlodingHTML = function (target, coverConfig) {
+ if (!target) {
+ return;
+ }
+ const config = customLoadingConfig();
+ if (coverConfig && JSON.stringify(coverConfig) !== "{}") {
+ Object.assign(config, coverConfig);
+ }
+ if (typeof config.enable === "boolean" && config.enable === false) {
+ return {
+ el: '',
+ show: show,
+ close: close
+ }
+ }
+ const imageHtml = luckysheetloadingImage(config);
+ const id = "luckysheet-loading-" + uuid.v4();
+ const loadingHtml = `
+
+
+ ${imageHtml}
+
+
+ ${config.text}
+
+
全选
',
// menu_copy: ' 复制
',
diff --git a/src/controllers/filter.js b/src/controllers/filter.js
index 4561a1a..93a5cfb 100644
--- a/src/controllers/filter.js
+++ b/src/controllers/filter.js
@@ -5,6 +5,7 @@ import tooltip from '../global/tooltip';
import { rowlenByRange } from '../global/getRowlen';
import { selectHightlightShow } from './select';
import { luckysheetMoveEndCell } from './sheetMove';
+import { luckysheetlodingHTML } from '../controllers/constant';
import server from './server';
import locale from '../locale/locale';
import Store from '../store';
@@ -480,7 +481,8 @@ function initialFilterHandler(){
orderbydatafiler(st_r, st_c, ed_r, ed_c, cindex, false);
});
- $("#luckysheet-filter-byvalue-select").empty().html(''+locale_filter.filiterMoreDataTip+' ');
+ const loadingObj = luckysheetlodingHTML("#luckysheet-filter-byvalue-select",{text:locale_filter.filiterMoreDataTip});
+ $("#luckysheet-filter-byvalue-select").empty().append(loadingObj.el);
let rowhiddenother = {}; //其它筛选列的隐藏行
$("#luckysheet-filter-options-sheet" + Store.currentSheetIndex + " .luckysheet-filter-options").not(this).each(function () {
@@ -726,8 +728,8 @@ function initialFilterHandler(){
}
}
}
-
- $("#luckysheet-filter-byvalue-select").html("");
+ $("#luckysheet-filter-byvalue-select").append("");
+ loadingObj.close();
}, 1);
showrightclickmenu($menu, toffset.left, toffset.top + 20);
diff --git a/src/controllers/menuButton.js b/src/controllers/menuButton.js
index 16fc31f..6a94403 100644
--- a/src/controllers/menuButton.js
+++ b/src/controllers/menuButton.js
@@ -545,8 +545,6 @@ const menuButton = {
_this.updateFormat(d, "fc", color);
});
-
-
$("#luckysheet-icon-text-color-menu").mousedown(function(e){
hideMenuByCancel(e);
e.stopPropagation();
@@ -601,6 +599,7 @@ const menuButton = {
["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]],
change: function (color) {
+ let $input = $(this);
if (color != null) {
color = color.toHexString();
}
@@ -608,6 +607,7 @@ const menuButton = {
color = "#000";
}
+ let oldcolor = null;
// $("#luckysheet-icon-text-color .luckysheet-color-menu-button-indicator").css("border-bottom-color", color);
// 下边框换成了一个DIV
$("#luckysheet-icon-text-color .text-color-bar").css("background-color", color);
@@ -618,9 +618,6 @@ const menuButton = {
$menuButton.hide();
luckysheetContainerFocus();
-
- /* 备注：在单元格编辑状态下切换了文本的颜色存在bug，此处需设置编辑框的color样式， */
- $("#luckysheet-input-box").css("color",color);
},
});
@@ -742,6 +739,7 @@ const menuButton = {
["#600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]
],
change: function (color) {
+ let $input = $(this);
if (color != null) {
color = color.toHexString();
}
@@ -749,6 +747,7 @@ const menuButton = {
color = "#fff";
}
+ let oldcolor = null;
// $("#luckysheet-icon-cell-color .luckysheet-color-menu-button-indicator").css("border-bottom-color", color);
// 下边框换成了一个DIV
$("#luckysheet-icon-cell-color .text-color-bar").css("background-color", color);
@@ -2403,7 +2402,7 @@ const menuButton = {
let dataset = new Function("return " + d)();
setTimeout(function(){
- $("#luckysheetloadingdata").fadeOut().remove();
+ Store.loadingObj.close()
}, 500);
for(let item in dataset){
diff --git a/src/controllers/pivotTable.js b/src/controllers/pivotTable.js
index aaeb9f0..c665e6d 100644
--- a/src/controllers/pivotTable.js
+++ b/src/controllers/pivotTable.js
@@ -36,6 +36,7 @@ import {checkProtectionAuthorityNormal} from './protection';
import Store from '../store';
import locale from '../locale/locale';
import numeral from 'numeral';
+import { luckysheetlodingHTML } from '../controllers/constant';
const pivotTable = {
pivotDatas: null,
@@ -283,8 +284,8 @@ const pivotTable = {
else if (byconditiontype == "1") {
$("#luckysheet-pivotTableFilter-menu .luckysheet-pivotTableFilter-selected-input").eq(0).show().find("input").val($t.data("byconditionvalue1"));
}
-
- $("#luckysheet-pivotTableFilter-byvalue-select").empty().html('
'+locale_filter.filiterMoreDataTip+' ');
+ const loadingObj = luckysheetlodingHTML("#luckysheet-pivotTableFilter-byvalue-select",{text:locale_filter.filiterMoreDataTip});
+ $("#luckysheet-pivotTableFilter-byvalue-select").empty().append(loadingObj.el)
let rowhiddenother = {}; //其它筛选列的隐藏行
$("#luckysheet-modal-dialog-pivotTable-list .luckysheet-modal-dialog-slider-list-item").not($t.get(0)).each(function () {
@@ -533,7 +534,8 @@ const pivotTable = {
}
}
- $("#luckysheet-pivotTableFilter-byvalue-select").html("" + item.join("") + "
");
+ $("#luckysheet-pivotTableFilter-byvalue-select").append("" + item.join("") + "
");
+ loadingObj.close()
}, 1);
showrightclickmenu($menu, toffset.left - 250, toffset.top);
diff --git a/src/controllers/sheetmanage.js b/src/controllers/sheetmanage.js
index dc3208a..3a5efe8 100644
--- a/src/controllers/sheetmanage.js
+++ b/src/controllers/sheetmanage.js
@@ -864,12 +864,12 @@ const sheetmanage = {
if(luckysheetConfigsetting.pointEdit){
setTimeout(function(){
- $("#luckysheetloadingdata").remove();
+ Store.loadingObj.close()
}, 0);
}
else{
setTimeout(function(){
- $("#luckysheetloadingdata").fadeOut().remove();
+ Store.loadingObj.close()
}, 500);
}
}
@@ -1243,7 +1243,7 @@ const sheetmanage = {
let data = _this.buildGridData(file);
setTimeout(function(){
- $("#luckysheetloadingdata").fadeOut().remove();
+ Store.loadingObj.close()
}, 500);
for(let item in dataset){
diff --git a/src/core.js b/src/core.js
index 72cc143..57c5a0f 100644
--- a/src/core.js
+++ b/src/core.js
@@ -90,6 +90,7 @@ luckysheet.create = function (setting) {
luckysheetConfigsetting.accuracy = extendsetting.accuracy;
luckysheetConfigsetting.total = extendsetting.data[0].total;
+ luckysheetConfigsetting.loading = extendsetting.loading;
luckysheetConfigsetting.allowCopy = extendsetting.allowCopy;
luckysheetConfigsetting.showtoolbar = extendsetting.showtoolbar;
luckysheetConfigsetting.showtoolbarConfig = extendsetting.showtoolbarConfig;
@@ -157,7 +158,8 @@ luckysheet.create = function (setting) {
Store.devicePixelRatio = Math.ceil(devicePixelRatio);
//loading
- $("#" + container).append(luckysheetlodingHTML());
+ const loadingObj=luckysheetlodingHTML("#" + container)
+ Store.loadingObj=loadingObj
if (loadurl == "") {
sheetmanage.initialjfFile(menu, title);
diff --git a/src/css/luckysheet-core.css b/src/css/luckysheet-core.css
index eb89815..9dcbc28 100644
--- a/src/css/luckysheet-core.css
+++ b/src/css/luckysheet-core.css
@@ -24,8 +24,8 @@
.luckysheet {
position: absolute;
- /* width: 100%;
- height: 100%;*/
+ /*width: 100%;
+ height: 100%;*/
font-size: 12px;
font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
border: 1px solid #e5e5e5;
@@ -37,6 +37,70 @@
outline: none;
}
+.luckysheetLoaderGif {
+ /*换用GIF loading*/
+ width: 8em;
+ height: 8em;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -ms-transform: translate(-50%, -100%);
+ -moz-transform: translate(-50%, -100%);
+ -o-transform: translate(-50%, -100%);
+ transform: translate(-50%, -100%);
+
+ background-image: url(loading.gif);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100% 100%;
+}
+
+.luckysheet-loading-mask{
+ position:absolute;
+ z-index:1000000000;
+ margin: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width:100%;
+ height:100%;
+ background:#fff;
+}
+
+.luckysheet-loading-content{
+ position:relative;
+ top: 50%;
+ transform: translateY(-50%);
+ width:100%;
+ font-size: 14px;
+ color: #409eff;
+ text-align:center;
+}
+
+.luckysheet-loading-image{
+ width: 8em;
+ height: 8em;
+ margin: 0 auto;
+}
+
+.luckysheet-loading-text{
+ margin-top: 1em;
+}
+
+.luckysheet-loading-image .image-type{
+ width:100%;
+ height:100%;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100% 100%;
+}
+
+.luckysheet-loading-image .path-type{
+ width:100%;
+ height:100%;
+}
+
.luckysheet-work-area {
height: 90px;
width: 100%;
@@ -4936,24 +5000,6 @@ fieldset[disabled] .btn-danger.focus {
animation: load-effect 1s infinite linear;
}
-.luckysheetLoaderGif {
- /*换用GIF loading*/
- width: 8em;
- height: 8em;
- position: absolute;
- top: 50%;
- left: 50%;
- -ms-transform: translate(-50%, -100%);
- -moz-transform: translate(-50%, -100%);
- -o-transform: translate(-50%, -100%);
- transform: translate(-50%, -100%);
-
- background-image: url(loading.gif);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 100% 100%;
-}
-
/*.luckysheetLoaderGif>img{
width:100%;
height:100%;
diff --git a/src/global/method.js b/src/global/method.js
index 9d7eab8..e7ebad1 100644
--- a/src/global/method.js
+++ b/src/global/method.js
@@ -326,7 +326,7 @@ const method = {
luckysheetextendData(dataset["row"], newData);
setTimeout(function(){
- $("#luckysheetloadingdata").fadeOut().remove();
+ Store.loadingObj.close()
}, 500);
if(func && typeof(func)=="function"){
@@ -359,7 +359,7 @@ const method = {
let data = sheetmanage.buildGridData(file);
setTimeout(function(){
- $("#luckysheetloadingdata").fadeOut().remove();
+ Store.loadingObj.close()
}, 500);
file["data"] = data;
diff --git a/src/index.html b/src/index.html
index e098e95..2fa8773 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1869,13 +1869,62 @@
"scrollTop": 0
}]*/
}
- }
-
- luckysheet.create(options);
-
- })
+ }
+ options.loading={
+ image:()=>{
+ return ``
+ },
+ imageClass:"loadingAnimation"
+ }
+ luckysheet.create(options);
+ })
-
+