SpreadJS 自定义实现类似 Excel 的高亮行列功能：结合事件与样式设置

收藏

背景：SpreadJS不支持Microsoft Excel的高亮行列功能，可以通过事件和样式自定义实现。
问题原帖：https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=228940

通过对单元格设置样式可以凸显单元格，如果以被选中的单元格为中心，将样式横向扩展至单元格所在行的所有单元格，同理，沿纵向扩展至单元格所在列所有单元格，那么，强调效果更突出。Microsoft Excel中支持了这一功能，通过菜单栏视图选项卡中的功能按钮即可触发。SpreadJS虽然未提供相同功能的工具栏按钮，但是通过公开API可以自定义实现，使得高亮的样式不再单一，灵活多变。

假定以点击单元格为触发源，希望在点击单元格时呈现上述的高亮效果，而在光标离开单元格点击另外的单元格时，高亮效果由旧区域移至新区域。那么，可以结合CellClick和ActiveCellChanged事件实现，具体思路如下：对Worksheet注册ActiveCellChanged事件，该事件在切换单元格时被触发，可以监听到切换前后单元格的行列索引，对切换前的行列和活动单元格移除样式，对切换后的行列和当前活动单元格设置样式。至于如何设置样式中的各属性，完全可以根据业务需求自行定义。

上述思路的执行效果如图1所示，附上demo，以供参考。

图1. 高亮行列

		自动登录	找回密码
密码			立即注册

SpreadJS 自定义实现类似 Excel 的高亮行列功能：结合事件与样式设置

0 个回复