SpreadJS高量区域（浮动涂层）

在一些场景下有需要高亮框出某个区域，类似SpreadJS的选择区域，如果用SpreadJS边框去做，需要缓存原有边框。
通过浮动div可以简单快速实现需求

首先
在spreadJS host中放入div，方便定位，并设置position

1. <div id="ss" style="width:80%;height:80%;margin-left: 200px;position: relative;">
   
2.     <div id="highLightRect"></div>
   
3.         </div>

复制代码

设置highLightRect的浮动样式，如果仍需要高亮区域可以正常操作，设置pointer-events: none，让点击击穿高亮div

1. #highLightRect{
   
2.             position: absolute;
   
3.             height: 218px;
   
4.             width: 542px;
   
5.             top: 18px;
   
6.             left: 38px;
   
7.             border: 3px solid lightseagreen;
   
8.             pointer-events: none;
   
9.         }

复制代码

设置完成后需要根据CellRange的位置调整highLightRect的偏移和大小，同时当滚动是也要考虑更新

1. spread.bind(GC.Spread.Sheets.Events.TopRowChanged, function(){
   
2.     updateHighlightRect()
   
3.             })
   
4.             spread.bind(GC.Spread.Sheets.Events.LeftColumnChanged, function(){
   
5.     updateHighlightRect()
   
6.             })
   
7. 
   
8.             function updateHighlightRect(){
   
9.     var sheet = spread.getActiveSheet();
   
10.     var rect = sheet.getCellRect(10, 5)
    
11.     var highLightRect = document.getElementById("highLightRect");
    
12.     highLightRect.style.top = (rect.y || 0) - 2 + "px"
    
13.     highLightRect.style.left = (rect.x || 0) - 2 + "px"
    
14.             }

复制代码