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]