diff --git a/docs/guide/config.md b/docs/guide/config.md index 9c27ec4e1..d50edd709 100644 --- a/docs/guide/config.md +++ b/docs/guide/config.md @@ -226,7 +226,7 @@ Note that you also need to configure `loadUrl` and `loadSheetUrl` to take effect screenshot: false, //'screenshot' findAndReplace: false, //'Find and Replace' protection:false, // 'Worksheet protection' - print:false, // 'print' + print:false, // 'Print' } ``` - Example: @@ -315,18 +315,40 @@ Note that you also need to configure `loadUrl` and `loadSheetUrl` to take effect ------------ ### showstatisticBarConfig -[todo] - - Type: Object - Default: {} -- Usage: Customize the bottom count bar +- Usage: Customize the bottom count bar, can be used in conjunction with `showstatisticBar`, `showstatisticBarConfig` has a higher priority. - Format: ```json { - count: false, // Count bar + count: false, // Count bar + view: false, // Print view zoom: false // Zoom } - + ``` +- Example: + - Only display the `Zoom` button: + + ```js + //options + { + showstatisticBar: false, + showstatisticBarConfig:{ + zoom: true, + } + } + ``` + - Only hide the `print view` button: + + ```js + //options + { + showstatisticBar: true, // The default is true, you can leave it unset + showstatisticBarConfig:{ + view: false, + } + } + ``` ------------ ### sheetBottomConfig @@ -534,12 +556,6 @@ The hook functions are uniformly configured under ʻoptions.hook`, and configura - {Object} [oldV]: Cell object before Modified - {Object} [newV]: Cell object after Modified ------------- -### fireMousedown -- Type: Function -- Default: null -- Usage: Customized method of drilling down cell data - ------------ ## Selected area @@ -1021,4 +1037,13 @@ The hook functions are uniformly configured under ʻoptions.hook`, and configura - Parameter: - {Object} [frozen]: Freeze type information +------------ + +#### Legacy Hook Function + +### fireMousedown +- Type: Function +- Default: null +- Usage: Customized method of drilling down cell data, note that this hook function is mounted under options: `options.fireMousedown` + ------------ \ No newline at end of file diff --git a/docs/zh/guide/config.md b/docs/zh/guide/config.md index 1f0161ea7..e44f242f1 100644 --- a/docs/zh/guide/config.md +++ b/docs/zh/guide/config.md @@ -403,17 +403,40 @@ Luckysheet开放了更细致的自定义配置选项，分别有 ------------ ### showstatisticBarConfig -[todo] - - 类型：Object - 默认值：{} -- 作用：自定义配置底部计数栏 +- 作用：自定义配置底部计数栏，可以与showstatisticBar配合使用，`showstatisticBarConfig`拥有更高的优先级。 - 格式： ```json { count: false, // 计数栏 - zoom: false // 缩放 + view: false, // 打印视图 + zoom: false, // 缩放 } + ``` +- 示例： + - 仅显示缩放按钮： + + ```js + //options + { + showstatisticBar: false, + showstatisticBarConfig:{ + zoom: true, + } + } + ``` + - 仅隐藏打印视图按钮： + + ```js + //options + { + showstatisticBar: true, // 默认就是true，可以不设置 + showstatisticBarConfig:{ + view: false, + } + } + ``` ------------ ### sheetBottomConfig @@ -585,26 +608,40 @@ Luckysheet开放了更细致的自定义配置选项，分别有 ## 单元格 -### cellRenderAfter -（TODO） +### cellRenderBefore + - 类型：Function - 默认值：null -- 作用：单元格渲染结束后触发 +- 作用：单元格渲染前触发，`return false` 则不渲染该单元格 - 参数： - - {Number} [r]: 单元格所在行数 - - {Number} [c]: 单元格所在列数 - - {Object} [v]: 单元格对象 + - {Object} [cell]:单元格对象 + - {Object} [postion]: + + {Number} [r]:单元格所在行号 + + {Number} [c]:单元格所在列号 + + {Number} [start_r]:单元格左上角的水平坐标 + + {Number} [start_c]:单元格左上角的垂直坐标 + + {Number} [end_r]:单元格右下角的水平坐标 + + {Number} [end_c]:单元格右下角的垂直坐标 + - {Object} [sheet]:当前sheet对象 + - {Object} [ctx]: 当前画布的context ------------ -### cellHover -（TODO） +### cellRenderAfter + - 类型：Function - 默认值：null -- 作用：鼠标移过单元格时(hover)触发 +- 作用：单元格渲染结束后触发，`return false` 则不渲染该单元格 - 参数： - - {Number} [r]: 单元格所在行数 - - {Number} [c]: 单元格所在列数 - - {Object} [v]: 单元格对象 + - {Object} [cell]:单元格对象 + - {Object} [postion]: + + {Number} [r]:单元格所在行号 + + {Number} [c]:单元格所在列号 + + {Number} [start_r]:单元格左上角的水平坐标 + + {Number} [start_c]:单元格左上角的垂直坐标 + + {Number} [end_r]:单元格右下角的水平坐标 + + {Number} [end_c]:单元格右下角的垂直坐标 + - {Object} [sheet]:当前sheet对象 + - {Object} [ctx]: 当前画布的context ------------ ### cellEditBefore @@ -630,11 +667,175 @@ Luckysheet开放了更细致的自定义配置选项，分别有 - {Object} [newV]: 修改后单元格对象 ------------ -### fireMousedown -（TODO） +### rowTitleCellRenderBefore + +- 类型：Function +- 默认值：null +- 作用：行标题单元格渲染前触发，`return false` 则不渲染行标题 +- 参数： + - {String} [rowNum]:行号 + - {Object} [postion]: + + {Number} [r]:单元格所在行号 + + {Number} [top]:单元格左上角的垂直坐标 + + {Number} [width]:单元格宽度 + + {Number} [height]:单元格高度 + - {Object} [ctx]: 当前画布的context + +------------ +### rowTitleCellRenderAfter + +- 类型：Function +- 默认值：null +- 作用：行标题单元格渲染后触发，`return false` 则不渲染行标题 +- 参数： + - {String} [rowNum]:行号 + - {Object} [postion]: + + {Number} [r]:单元格所在行号 + + {Number} [top]:单元格左上角的垂直坐标 + + {Number} [width]:单元格宽度 + + {Number} [height]:单元格高度 + - {Object} [ctx]: 当前画布的context + +------------ +### columnTitleCellRenderBefore + +- 类型：Function +- 默认值：null +- 作用：列标题单元格渲染前触发，`return false` 则不渲染列标题 +- 参数： + - {Object} [columnAbc]:列标题字符 + - {Object} [postion]: + - {Number} [c]:单元格所在列号 + - {Number} [left]:单元格左上角的水平坐标 + - {Number} [width]:单元格宽度 + - {Number} [height]:单元格高度 + - {Object} [ctx]: 当前画布的context + +------------ +### columnTitleCellRenderAfter + +- 类型：Function +- 默认值：null +- 作用：列标题单元格渲染后触发，`return false` 则不渲染列标题 +- 参数： + - {Object} [columnAbc]:列标题字符 + - {Object} [postion]: + - {Number} [c]:单元格所在列号 + - {Number} [left]:单元格左上角的水平坐标 + - {Number} [width]:单元格宽度 + - {Number} [height]:单元格高度 + - {Object} [ctx]: 当前画布的context + +------------ + +## 鼠标钩子 + +### cellMousedownBefore + +- 类型：Function +- 默认值：null +- 作用：单元格点击前的事件，`return false`则终止之后的点击操作 +- 参数： + - {Object} [cell]:单元格对象 + - {Object} [postion]: + + {Number} [r]:单元格所在行号 + + {Number} [c]:单元格所在列号 + + {Number} [start_r]:单元格左上角的水平坐标 + + {Number} [start_c]:单元格左上角的垂直坐标 + + {Number} [end_r]:单元格右下角的水平坐标 + + {Number} [end_c]:单元格右下角的垂直坐标 + - {Object} [sheet]:当前sheet对象 + - {Object} [ctx]: 当前画布的context + +------------ +### cellMousedown + - 类型：Function - 默认值：null -- 作用：单元格数据下钻自定义方法 +- 作用：单元格点击后的事件，`return false`则终止之后的点击操作 +- 参数： + - {Object} [cell]:单元格对象 + - {Object} [postion]: + + {Number} [r]:单元格所在行号 + + {Number} [c]:单元格所在列号 + + {Number} [start_r]:单元格左上角的水平坐标 + + {Number} [start_c]:单元格左上角的垂直坐标 + + {Number} [end_r]:单元格右下角的水平坐标 + + {Number} [end_c]:单元格右下角的垂直坐标 + - {Object} [sheet]:当前sheet对象 + - {Object} [ctx]: 当前画布的context + +------------ +### sheetMousemove + +- 类型：Function +- 默认值：null +- 作用：鼠标移动事件，可通过cell判断鼠标停留在哪个单元格 +- 参数： + - {Object} [cell]:单元格对象 + - {Object} [postion]: + + {Number} [r]:单元格所在行号 + + {Number} [c]:单元格所在列号 + + {Number} [start_r]:单元格左上角的水平坐标 + + {Number} [start_c]:单元格左上角的垂直坐标 + + {Number} [end_r]:单元格右下角的水平坐标 + + {Number} [end_c]:单元格右下角的垂直坐标 + - {Object} [sheet]:当前sheet对象 + - {Object} [moveState]:鼠标移动状态，可判断现在鼠标操作的对象，false和true + + {Boolean} [functionResizeStatus]:工具栏拖动 + + {Boolean} [horizontalmoveState]:水平冻结分割烂拖动 + + {Boolean} [verticalmoveState]:垂直冻结分割烂拖动 + + {Boolean} [pivotTableMoveState]:数据透视表字段拖动 + + {Boolean} [sheetMoveStatus]:sheet改变你位置拖动 + + {Boolean} [scrollStatus]:鼠标触发了滚动条移动 + + {Boolean} [selectStatus]:鼠标移动框选数据 + + {Boolean} [rowsSelectedStatus]:通过行标题来选择整行操作 + + {Boolean} [colsSelectedStatus]:通过列标题来选择整列操作 + + {Boolean} [cellSelectedMove]:选框的移动 + + {Boolean} [cellSelectedExtend]:选框下拉填充 + + {Boolean} [colsChangeSize]:拖拽改变列宽 + + {Boolean} [rowsChangeSize]:拖拽改变行高 + + {Boolean} [chartMove]:图表移动 + + {Boolean} [chartResize]:图表改变大小 + + {Boolean} [rangeResize]:公式参数高亮选区的大小拖拽 + + {Boolean} [rangeMove]:公式参数高亮选区的位置拖拽 + - {Object} [ctx]: 当前画布的context + +------------ +### sheetMouseup + +- 类型：Function +- 默认值：null +- 作用：鼠标按钮释放事件，可通过cell判断鼠标停留在哪个单元格 +- 参数： + - {Object} [cell]:单元格对象 + - {Object} [postion]: + + {Number} [r]:单元格所在行号 + + {Number} [c]:单元格所在列号 + + {Number} [start_r]:单元格左上角的水平坐标 + + {Number} [start_c]:单元格左上角的垂直坐标 + + {Number} [end_r]:单元格右下角的水平坐标 + + {Number} [end_c]:单元格右下角的垂直坐标 + - {Object} [sheet]:当前sheet对象 + - {Object} [moveState]:鼠标移动状态，可判断现在鼠标操作的对象，false和true + + {Boolean} [functionResizeStatus]:工具栏拖动 + + {Boolean} [horizontalmoveState]:水平冻结分割烂拖动 + + {Boolean} [verticalmoveState]:垂直冻结分割烂拖动 + + {Boolean} [pivotTableMoveState]:数据透视表字段拖动 + + {Boolean} [sheetMoveStatus]:sheet改变你位置拖动 + + {Boolean} [scrollStatus]:鼠标触发了滚动条移动 + + {Boolean} [selectStatus]:鼠标移动框选数据 + + {Boolean} [rowsSelectedStatus]:通过行标题来选择整行操作 + + {Boolean} [colsSelectedStatus]:通过列标题来选择整列操作 + + {Boolean} [cellSelectedMove]:选框的移动 + + {Boolean} [cellSelectedExtend]:选框下拉填充 + + {Boolean} [colsChangeSize]:拖拽改变列宽 + + {Boolean} [rowsChangeSize]:拖拽改变行高 + + {Boolean} [chartMove]:图表移动 + + {Boolean} [chartResize]:图表改变大小 + + {Boolean} [rangeResize]:公式参数高亮选区的大小拖拽 + + {Boolean} [rangeMove]:公式参数高亮选区的位置拖拽 + - {Object} [ctx]: 当前画布的context ------------ @@ -1171,4 +1372,14 @@ Luckysheet开放了更细致的自定义配置选项，分别有 - 参数： - {Object} [frozen]: 冻结类型信息 +------------ + +## 旧版钩子函数 + +### fireMousedown + +- 类型：Function +- 默认值：null +- 作用：单元格数据下钻自定义方法，注意此钩子函数是挂载在options下：`options.fireMousedown` + ------------ \ No newline at end of file diff --git a/src/config.js b/src/config.js index bba5bb129..31cb7ddf2 100644 --- a/src/config.js +++ b/src/config.js @@ -67,7 +67,4 @@ export default { sheetBottomConfig:{}, //自定义添加行和回到顶部 cellRightClickConfig:{}, //自定义单元格右键菜单 sheetRightClickConfig:{}, //自定义底部sheet页右击菜单 - - - } \ No newline at end of file diff --git a/src/controllers/constant.js b/src/controllers/constant.js index 2aacaadb8..086da937e 100644 --- a/src/controllers/constant.js +++ b/src/controllers/constant.js @@ -238,7 +238,7 @@ const gridHTML = function(){
-
+ diff --git a/src/controllers/resize.js b/src/controllers/resize.js index ca616d329..1e71012c3 100644 --- a/src/controllers/resize.js +++ b/src/controllers/resize.js @@ -42,21 +42,23 @@ export default function luckysheetsizeauto(isRefreshCanvas=true) { customSheetbarConfig(); - if (!luckysheetConfigsetting.showstatisticBar) { - $("#" + Store.container).find(".luckysheet-stat-area").hide(); - Store.statisticBarHeight = 0; - } - else { - $("#" + Store.container).find(".luckysheet-stat-area").show(); - Store.statisticBarHeight = 23; - } + // if (!luckysheetConfigsetting.showstatisticBar) { + // $("#" + Store.container).find(".luckysheet-stat-area").hide(); + // Store.statisticBarHeight = 0; + // } + // else { + // $("#" + Store.container).find(".luckysheet-stat-area").show(); + // Store.statisticBarHeight = 23; + // } + + customStatisticBarConfig(); // 公式栏 Store.calculatebarHeight = document.querySelector('#luckysheet-wa-calculate').offsetHeight; $("#" + Store.container).find(".luckysheet-grid-container").css("top", Store.toolbarHeight + Store.infobarHeight + Store.calculatebarHeight); - gridW = $("#" + Store.container).width(), gridH = $("#" + Store.container).height(); + gridW = $("#" + Store.container).width(); if(luckysheetConfigsetting.showConfigWindowResize){//数据透视表 图表 交替颜色 Protection if($("#luckysheet-modal-dialog-slider-pivot").is(":visible")){ @@ -73,18 +75,10 @@ export default function luckysheetsizeauto(isRefreshCanvas=true) { } } - $("#" + Store.container).find(".luckysheet").height(gridH - 2).width(gridW - 2); - - changeSheetContainerSize(gridW, gridH) - - if(isRefreshCanvas){ - luckysheetrefreshgrid($("#luckysheet-cell-main").scrollLeft(), $("#luckysheet-cell-main").scrollTop()); - } const _locale = locale(); const locale_toolbar = _locale.toolbar; let ismore = false, - toolbarW = 0, - // morebtn = '
'+ locale_toolbar.toolMore +'...
', + toolbarW = 0, morebtn = `
@@ -98,7 +92,6 @@ export default function luckysheetsizeauto(isRefreshCanvas=true) {
`, - // morediv = '
'; morediv = '
'; if($("#luckysheet-icon-morebtn-div").length == 0){ @@ -116,25 +109,8 @@ export default function luckysheetsizeauto(isRefreshCanvas=true) { $container.appendChild($t); }); - // $("#luckysheet-wa-editor > div").trigger("create"); - // $("#luckysheet-icon-morebtn-div > div").trigger("create"); $("#luckysheet-icon-morebtn").remove(); - //计算前面按钮宽度加起来总和，超过 容器宽度-更多按钮，则剩下的按钮移动到展开的容器内，这种方式计算宽度不准确，且会导致下拉箭头和主按钮分离的情况，改为 计算left作为宽度依据，和容器宽度比较的方式 - // $("#luckysheet-wa-editor > div").each(function(){ - // let $t = $(this); - // // toolbarW += $t.outerWidth(); - // toolbarW += $t.outerWidth(); - - // if(!ismore && toolbarW > gridW - 140){ - // ismore = true; - // } - - // if(ismore){ - // $("#luckysheet-icon-morebtn-div").append($(this)); - // } - // }); - // 所有按钮宽度与元素定位 const toobarWidths = Store.toobarObject.toobarWidths; const toobarElements = Store.toobarObject.toobarElements; @@ -233,6 +209,17 @@ export default function luckysheetsizeauto(isRefreshCanvas=true) { $(this).prev(".luckysheet-toolbar-button-split-left").removeClass("luckysheet-toolbar-button-hover"); }); + // When adding elements to the luckysheet-icon-morebtn-div element of the toolbar, it will affect the height of the entire workbook area, so the height is obtained here + gridH = $("#" + Store.container).height(); + + $("#" + Store.container).find(".luckysheet").height(gridH - 2).width(gridW - 2); + + changeSheetContainerSize(gridW, gridH) + + if(isRefreshCanvas){ + luckysheetrefreshgrid($("#luckysheet-cell-main").scrollLeft(), $("#luckysheet-cell-main").scrollTop()); + } + sheetmanage.sheetArrowShowAndHide(); sheetmanage.sheetBarShowAndHide(); } @@ -557,6 +544,9 @@ export function menuToolBarWidth() { } +/** + *Custom configuration bottom sheet button + */ function customSheetbarConfig() { if(!luckysheetConfigsetting.initShowsheetbarConfig){ @@ -564,9 +554,9 @@ function customSheetbarConfig() { luckysheetConfigsetting.initShowsheetbarConfig = true; const config = { - add: true, //新增sheet - menu: true, //sheet管理菜单 - sheet: true //sheet页显示 + add: true, //Add worksheet + menu: true, //Worksheet management menu + sheet: true //Worksheet display } if(!luckysheetConfigsetting.showsheetbar){ @@ -622,4 +612,73 @@ function customSheetbarConfig() { $("#" + Store.container).find("#luckysheet-sheet-area").show(); Store.sheetBarHeight = 31; } +} + + +/** + * Customize the bottom count bar + */ +function customStatisticBarConfig() { + if(!luckysheetConfigsetting.initStatisticBarConfig){ + + luckysheetConfigsetting.initStatisticBarConfig = true; + + const config = { + count: true, // Count bar + view: true, // print view + zoom: true // Zoom + } + + if(!luckysheetConfigsetting.showstatisticBar){ + for(let s in config){ + config[s] = false; + } + } + + // showstatisticBarConfig determines the final result + if(JSON.stringify(luckysheetConfigsetting.showstatisticBarConfig) !== '{}'){ + Object.assign(config,luckysheetConfigsetting.showstatisticBarConfig); + } + + luckysheetConfigsetting.showstatisticBarConfig = config; + + } + + const config = luckysheetConfigsetting.showstatisticBarConfig; + + let isHide = 0; + + for (let s in config) { + if(!config[s]){ + switch (s) { + case 'count': + $('#luckysheet-sta-content').hide(); + isHide++; + break; + + case 'view': + $('.luckysheet-print-viewList').hide(); + isHide++; + break; + + case 'zoom': + $('#luckysheet-zoom-content').hide(); + isHide++; + break; + + default: + break; + } + } + } + + if (isHide === 3) { + $("#" + Store.container).find(".luckysheet-stat-area").hide(); + Store.statisticBarHeight = 0; + } + else { + $("#" + Store.container).find(".luckysheet-stat-area").show(); + Store.statisticBarHeight = 23; + } + } \ No newline at end of file diff --git a/src/core.js b/src/core.js index 36883afa8..9f76cc6d8 100644 --- a/src/core.js +++ b/src/core.js @@ -91,6 +91,8 @@ luckysheet.create = function (setting) { luckysheetConfigsetting.showsheetbar = extendsetting.showsheetbar; luckysheetConfigsetting.showsheetbarConfig = extendsetting.showsheetbarConfig; luckysheetConfigsetting.showstatisticBar = extendsetting.showstatisticBar; + luckysheetConfigsetting.showstatisticBarConfig = extendsetting.showstatisticBarConfig; + luckysheetConfigsetting.sheetBottomConfig = extendsetting.sheetBottomConfig; luckysheetConfigsetting.pointEdit = extendsetting.pointEdit; luckysheetConfigsetting.pointEditUpdate = extendsetting.pointEditUpdate; luckysheetConfigsetting.pointEditZoom = extendsetting.pointEditZoom; diff --git a/src/css/luckysheet-core.css b/src/css/luckysheet-core.css index 6068da10b..f8726303f 100644 --- a/src/css/luckysheet-core.css +++ b/src/css/luckysheet-core.css @@ -979,9 +979,9 @@ } .luckysheet-sta-c .luckysheet-sta-content { - position: absolute; - left: 0px; - right: 358px; + /* position: absolute; */ + /* left: 0px; */ + /* right: 358px; */ height: 22px; line-height: 22px; text-align: right; diff --git a/src/css/luckysheet-print.css b/src/css/luckysheet-print.css index 3ec9b401f..106885821 100644 --- a/src/css/luckysheet-print.css +++ b/src/css/luckysheet-print.css @@ -1,7 +1,8 @@ .luckysheet-print-viewList{ - position: absolute; + position: relative; + float: right; width:126px; - right: 222px; + /* right: 222px; */ height: 22px; line-height: 22px; text-align: center; diff --git a/src/css/luckysheet-zoom.css b/src/css/luckysheet-zoom.css index 5dab60b71..a8ddbe3f0 100644 --- a/src/css/luckysheet-zoom.css +++ b/src/css/luckysheet-zoom.css @@ -1,7 +1,8 @@ .luckysheet-zoom-content{ - position: absolute; + position: relative; + float: right; width:210px; - right: 0px; + /* right: 0px; */ height: 22px; line-height: 22px; text-align: right; diff --git a/src/index.html b/src/index.html index 369b00c8a..35d702525 100644 --- a/src/index.html +++ b/src/index.html @@ -1793,6 +1793,7 @@ "scrollTop": 0 }]*/ }) + })