Day 6 让表格动起来

返回目录

以下知识源码位置：[Git:  https://gitee.com/zhouweng/mini_sheet  version=fb0b051f1c545c6b3aeeb647795b25fc097e44af]

 

首先看一下效果，通过X和Y轴滚动栏和鼠标滑轮，可以实现表格拖动，效果如下：

 

与滚动相关的代码 包括：

0.基础知识：

H5 CSS : .mousewheel() / .scroll() / .css() / .show() 

git: git log / git reset --hard [id]

1.global/scroll.js  

   函数luckysheetscrollevent()， 作用是 根据X/Y滚动条，把下面这些元素的 Left和Top设置好，并调用refresh.luckysheetrefreshgrid(), 刷新表格里面的单元格：

  1)表格  id=#luckysheet-cell-main

  2)行标题  id=#luckysheet-rows-h

  3)列标题 id=#luckysheet-cols-h-c

 

2.controllers/handler.js

 函数 luckysheetHandler()，定义了#luckysheet-scrollbar-x和#luckysheet-scrollbar-y 这两个滚动条

的scroll event处理，调用 scroll.luckysheetscrollevent()。另外还定义了 #luckysheet-grid-window-1 

元素上鼠标滚动的时候，通过 .scrollTop() 改变 #luckysheet-scrollbar-y  滚动条的垂直位置

 

3.core.js

  在页面完全加载后， 新增一行  调用 handler.luckysheetHandler() ，把交互相关的event 调用起来

 

这样改造完成后，存在一个问题，当窗口的大小变化后，可能出现双重的滚动条，影响用户的使用体验

以下知识源码位置：[Git:  https://gitee.com/zhouweng/mini_sheet  version=f1ccda438313edb4d4b8cf87561661cff5c996c2]

0.基础知识：

H5 CSS : .mousewheel() / .scroll() / .css() / .show() 

1.handler.luckysheetHandler() 增加以下代码，在窗口大小变化的时候，重新调用以下 resize.luckysheetsizeauto(),根据重新计算的尺寸刷新一下界面

 

    // If brower's windows size change, refresh page

    $(window).resize(function () {

        let luckysheetDocument = document.getElementById(Store.container);

        if (luckysheetDocument) {

            luckysheetsizeauto();

        }

    });