dexteryao 发表于 2020-6-2 15:56:20

SpreadJS高量区域(浮动涂层)

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

首先
在spreadJS host中放入div,方便定位,并设置position
<div id="ss" style="width:80%;height:80%;margin-left: 200px;position: relative;">
    <div id="highLightRect"></div>
      </div>设置highLightRect的浮动样式,如果仍需要高亮区域可以正常操作,设置pointer-events: none,让点击击穿高亮div
#highLightRect{
            position: absolute;
            height: 218px;
            width: 542px;
            top: 18px;
            left: 38px;
            border: 3px solid lightseagreen;
            pointer-events: none;
      }设置完成后需要根据CellRange的位置调整highLightRect的偏移和大小,同时当滚动是也要考虑更新
spread.bind(GC.Spread.Sheets.Events.TopRowChanged, function(){
    updateHighlightRect()
            })
            spread.bind(GC.Spread.Sheets.Events.LeftColumnChanged, function(){
    updateHighlightRect()
            })

            function updateHighlightRect(){
    var sheet = spread.getActiveSheet();
    var rect = sheet.getCellRect(10, 5)
    var highLightRect = document.getElementById("highLightRect");
    highLightRect.style.top = (rect.y || 0) - 2 + "px"
    highLightRect.style.left = (rect.x || 0) - 2 + "px"
            }















页: [1]
查看完整版本: SpreadJS高量区域(浮动涂层)