Day 7 选择一个单元格

返回目录

 

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

源代码回滚版本，参考这里[ https://blog.csdn.net/u010593516/article/details/113767587 ]

 

上一节，我们为项目增加了交互的能力，这一节，我们继续扩展handler.js，增加单个单元格的点选，效果如下：

 

0.基础知识：

 Javascrit: 数组[].push()

 Goole浏览器的F12 调试断点

 

1.修改文件:

1)Store/index.js : Store里面增加了一个luckysheet_select_save，这是一个数组，用于传递哪些单元格被选中，

  在minisheet的这个版本只支持单个单元格的选定。

 

2)controller/constant.js: 在 luckysheet-cell-main 元素下，增加了luckysheet-cell-selected-boxs，再下面，增加了

 luckysheet-cell-selected，之前章节里面 canvas是绘制在  luckysheetTableContent上面，而选定的单元格，相当于是

 浮在 一个已经绘制好的表格图片之上。html元素的关系，可以参考 源代码的 readme.md 

 

3)controller/handler.js: 在#luckysheet-cell-main, #luckysheetTableContent 元素上增加了一个 mousedown()，

  通过global/location 定位具体的单元格位置，并记录到 Store.luckysheet_select_save数组，然后再调用 

  select.selectHightlightShow()，实现对单元格位置的矩形样式处理

 

2.新增文件：

1)global/location.js: 这个js文件包括三个对外服务的方法：

  mouseposition(x, y)：把鼠标点击xy坐标，变换为 表格区域相对位置;

  colLocation(x): 鼠标点击的是x轴方向的哪个单元格，这里非常巧妙地使用了Store.visibledatacolumn[]数组进行定位;

  colLocation(y): 鼠标点击的是y轴方向的哪个单元格，逻辑同上

2)controller/select.js：这个js文件的 selectHightlightShow() 方法，由handler的鼠标左键触发，通过传递过来的Store.luckysheet_select_save[]数组，

把相对应的单元格点亮。值得注意的是，处理点亮动作用到了循环，在luckysheet里面

支持多个单元格的选定（通过键盘的shift和ctrl键组合），在minisheet里面，目前只支持单个单元格的选定，所以，循环实际

可以忽略。

 

3.Store的两个visibledata 数组分析

  下面来具体研究一下，Store.visibledatarow 和 Store.visibledatacolumn 两个数组的实现和使用原理，这两个数组生成数据的逻辑位于 rhchInit.rhchInit()，

x和y轴分别通过两个循环体，生成每一个单元格的虚拟位置，我们再rhchinit.js 的Line27 增加一个断点，然后刷新页面，可以看到 Store.visibledatarow的

数据结构如下：