背景：将xlsx文件导入至SpreadJS，发现sheet页面有大面积空白区域，如何消除空白区域是值得商榷的页面美化问题。
问题原帖：https://gcdn.grapecity.com.cn/showtopic-234334-1-1.html
如果你有使用Microsoft Excel的经验，当你拖动垂直滚动条向下滑动时，单元格逐行蔓延，看似源源不断触不到底。但其实Microsoft Excel限定了一张sheet所能容纳的行数上限，2003及之前的版本容许最多行数为65536行，2007及之后的版本扩展为1048576 行。所以，当你向下拖动垂直滚动条时，便可看到源源不断的行，也因为行数足够多，才会给人好像有无穷尽行的既视感。
与此不同，SpreadJS并未限制sheet行数上限。SpreadJS的sheet是一个canvas实例，在浏览器页面上，它的区域是无穷尽的，就算你拖着垂直滚动条向下滚动至世界尽头，canvas也没有尽头。在canvas上按照既定的渲染策略绘制便得到了单元格，单元格分别沿着横向和纵向汇聚成了行和列。因此，SpreadJS中sheet行列可以根据需要做无限制扩展。Worksheet实例化时，默认在sheet上绘制200行20列的可用单元格区域。之后可以通过工具栏“设置”选项卡中的“工作表设置”手动设置行数和列数以实现扩展，如图1所示。也可以使用Worksheet:setRowCount()和Worksheet:setColumnCount()通过代码扩展行数和列数。
图1. 扩展行列
在导入xlsx文件至SpreadJS的过程，SpreadJS会根据导入文件中sheet的实际使用区域绘制单元格范围。如果实际使用区域远小于浏览器界面视窗范围，未被使用的区域便因为没有绘制单元格而以空白示之。如果出于页面美观的考量，一定要充实这些空白区域呢？那就充之，有两个充实策略，其一是设置更多行列数占满空白区域，另可为行列设置动态行高列宽以自适应填满页面，以下就两种方案做详细介绍。
1. 设置更多行列数
sheet区域分为行头（rowHeader）、列头（colHeader）、表角（corner）和单元格区域（viewport），如图2所示。
图2. sheet区域划分
如果可以知道viewport高度和宽度，便可通过当前总行高和总列宽分别计算出已使用区域下方空白区域的高度（spaceHeight）和右侧空白区域的宽度（spaceWidth）。默认情况下，绘制单元格的依据是默认行高和列宽。对于已使用区域下方的空白区域，就可以根据spaceHeight和单元格默认行高计算出可以容纳多少行。同理，根据spaceWidth和单元格默认宽度即可知已使用区域右侧空白区域可容纳的列数。之后，在当前行数基础上加上空白区域可容纳的行数，即可据此重置sheet行数，纵向来看sheet的viewport便满行了。同理，重置列数为当前列数与空白区域可容纳列数的计算和，viewport横向也可因此满列。如图3所示，按照上述思路可对sheet空白区域充满行列。
图3. sheet空白区域填充行列
2. 设置动态行高列宽
如果已使用区域下方和右侧均有空白区域，也可以对行和列分别设置动态行高和动态列宽，令行和列自适应填满viewport。但是，在viewport之外未能显示的区域仍然存在空白区域。那么，既然是滚动条拖出来的空白区域，那就对滚动条下手禁止显示滚动条，便无法拖动滚动条。或者，基于当前sheet行列显示滚动条，令滚动条中的滑块填满滚动条，同样也可以达到无法扩展sheet区域的效果。之后，对有限的viewport区域设置动态行高列宽，令已有行列平均化铺满viewport区域，如图4所示。
图4. 动态行高列宽
上述例子仅是存在空白区域的场景之一，也可能仅可用区域右侧为空白区域，或者仅可用区域左侧为空白区域。当可视区域以外没有行列时，可以直接隐藏滚动条，否则就需要显示滚动条。
附上demo，以供参考。
|
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图
