Day19 如何做合并单元格

返回目录

 

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

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

 

今天的内容非常高级，也很有难度，包括合并单元格的界面实现以及菜单项下拉选单的实现方法，具体的配置方法可以参考luckysheet的官网指引，除了celldata的v标签设置mc以外，还需要设置config的merge区域，具体实现后的效果如下：

 

 

 

1.显示单元格合并

1.1.增加文件

1.1.1.model/mergeborder.js: mergeborder()这个函数是支持合并单元格的核心算法，根据单元格数据flowdata、行号和列号，计算出合并单元格边界数组返回消费端；

1.2.修改文件

1.2.1.index.html: 根据luckysheet的规范，我们定义了 [2,2]-[3,3] 四个单元格合并，修改 celldata和config；

1.2.2.view/chooseOneCell.js: highlightOneCell() 在点选单元格的时候，判断是否在合并单元格区域，并在refresh界面前进行显示边界处理；

1.2.3.view/draw.js: luckysheetDrawMain()在循环处理单元格数据后，将合并单元格的数据写入mcArr数组，最后再循环处理这个数组；

1.2.4.view/updateCell.js: getColumnAndRowSize()获取行宽、列高的方法，增加合并单元格的判断；

 

2.菜单项合格单元格按钮

2.1.修改文件

2.1.1.utils/constant.js: 增加合并单元格按钮的下拉选单dropListMenu

2.1.2.controllers/menuButton.js: 增加 #luckysheet-icon-merge-button （合并单元格按钮）和 #luckysheet-icon-merge-menu（合并单元格选单）的事件，这一部分稍微有一点复杂。