elink-star
/
luckysheet
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(statisticbar): config docs 

1.Add statisticBarConfig 2.Update config docs
master
mengshukeji 5 years ago
parent
3555746f4c
commit
c1ed417074
10 changed files with 378 additions and 81 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 49
      docs/guide/config.md
  2. 249
      docs/zh/guide/config.md
  3. 3
      src/config.js
  4. 2
      src/controllers/constant.js
  5. 137
      src/controllers/resize.js
  6. 2
      src/core.js
  7. 6
      src/css/luckysheet-core.css
  8. 5
      src/css/luckysheet-print.css
  9. 5
      src/css/luckysheet-zoom.css
  10. 1
      src/index.html

49
docs/guide/config.md
View File

@ -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`
------------

249
docs/zh/guide/config.md
View File

@ -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`
------------

3
src/config.js
View File

@ -67,7 +67,4 @@ export default {
sheetBottomConfig:{}, //自定义添加行和回到顶部
cellRightClickConfig:{}, //自定义单元格右键菜单
sheetRightClickConfig:{}, //自定义底部sheet页右击菜单
}

2
src/controllers/constant.js
View File

@ -238,7 +238,7 @@ const gridHTML = function(){
<div type="viewPage" class="luckysheet-print-viewBtn luckysheet-print-viewPage" title="${locale_print.pageBtn}"><i class="icon iconfont icon-fenyeyulan"></i></div>
</div>
<div class="luckysheet-sta-content" id="luckysheet-sta-content"></div>
<div class="luckysheet-bottom-content" id="luckysheet-bottom-content-show"></div>
<!--<div class="luckysheet-bottom-content" id="luckysheet-bottom-content-show"></div> -->
</div>
</div>
</div>

137
src/controllers/resize.js
View File

@ -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 = '<div class="luckysheet-toolbar-separator luckysheet-inline-block" style="user-select: none;"> </div><div class="luckysheet-toolbar-button luckysheet-inline-block" data-tips="'+ locale_toolbar.toolMoreTip +'" id="luckysheet-icon-morebtn" role="button" style="user-select: none;"> <div class="luckysheet-toolbar-button-outer-box luckysheet-inline-block" style="user-select: none;"> <div class="luckysheet-toolbar-button-inner-box luckysheet-inline-block" style="user-select: none;"> <div class="luckysheet-toolbar-menu-button-caption luckysheet-inline-block" style="user-select: none;color:#0188fb;"><i class="fa fa-list-ul"></i> '+ locale_toolbar.toolMore +'... </div> </div> </div> </div>',
toolbarW = 0,
morebtn = `<div class="luckysheet-toolbar-button luckysheet-inline-block" data-tips="${locale_toolbar.toolMoreTip}" id="luckysheet-icon-morebtn" role="button" style="user-select: none;">
<div class="luckysheet-toolbar-button-outer-box luckysheet-inline-block" style="user-select: none;">
<div class="luckysheet-toolbar-button-inner-box luckysheet-inline-block" style="user-select: none;">
@ -98,7 +92,6 @@ export default function luckysheetsizeauto(isRefreshCanvas=true) {
</div>
</div>
</div>`,
// morediv = '<div id="luckysheet-icon-morebtn-div" class="luckysheet-wa-editor" style="position:absolute;top:'+ (Store.infobarHeight + Store.toolbarHeight + 3 + $("#" + Store.container).offset().top + $("body").scrollTop() - $("#luckysheet-functionbox-container").height() ) +'px; right:0px;z-index:1003;padding:8px;display:none;height:auto;white-space:initial;"></div>';
morediv = '<div id="luckysheet-icon-morebtn-div" class="luckysheet-wa-editor" style="position:absolute;top:'+ (Store.infobarHeight + Store.toolbarHeight + $("#" + Store.container).offset().top + $("body").scrollTop()) +'px; right:0px;z-index:1003;padding:5.5px;display:none;height:auto;white-space:initial;"></div>';
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;
}
}

2
src/core.js
View File

@ -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;

6
src/css/luckysheet-core.css
View File

@ -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;

5
src/css/luckysheet-print.css
View File

@ -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;

5
src/css/luckysheet-zoom.css
View File

@ -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;

1
src/index.html
View File

@ -1793,6 +1793,7 @@
"scrollTop": 0
}]*/
})
})
</script>

Write Preview
Loading…
Cancel
Save