登录/注册

首页 › SpreadJS & GcExcel专区 › 教程集锦 › 查看内容

127 主题	8942 帖子	1万积分

Rank: 8 Rank: 8

积分: 13643

61902
金币
127
主题
8942
帖子

最新发帖

SpreadJS高量区域（浮动涂层）

讲师达人认证

悬赏达人认证

SpreadJS 开发认证

超级版主 / 发表于：2020-6-2 15:56 / 查看：3427 / 回复：1

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

image.png916825256.png

首先
在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"
}

复制代码

收藏

回复

0 个回复