【V16】请问是否有办法无侵入式设置单元格/区域高亮

Ellia.Duan

本帖最后由缪小花于 2024-9-16 15:47 编辑

如题，我尝试使用Spreadjs进行协同编辑开发，为实现类似腾讯文档、金山文档，用高亮框+头像展示其他协作人选区，大致效果如下：

Screen Shot 2024-09-16 at 3.30.14 PM.png

当前采用边框（选区）+单元格装饰（头像）方式做的，大致代码如下：

const style = new GC.Spread.Sheets.Style();
const upperLeft = activeSheet.getCell(r.row<0?0:r.row, r.col<0?0:r.col)
style.decoration = {
icons: [{
src: awarenessObj.user.avatar,
width: 16,
height: 16,
position: r.col<0?GC.Spread.Sheets.IconPosition.left:GC.Spread.Sheets.IconPosition.outsideLeft,}]
}
upperLeft.setStyle(style)
let range = activeSheet.getRange(r.row, r.col, r.rowCount, r.colCount);
const color = getRandomColor()
let lineBorder = new GC.Spread.Sheets.LineBorder(color, GC.Spread.Sheets.LineStyle.thick);
range.setBorder(lineBorder, { outline: true });

复制代码

但目前存在以下问题：
1、会与表格原生样式产生冲突——会覆盖用户设置的边框，或被用户设置的边框覆盖
2、保存时选区和装饰数据也会被当做表格本身保存下来

我还尝试了使用FloatingObject实现绘制，但是会遮盖单元格，不能实现业务目标

想请教各位，是否有非侵入式（不影响表格本身数据和样式）的方式来实现这种只用于展示的高亮效果

谢谢！

Ellia.Duan · Ellia.Duan

您好，请参考这篇demo:
https://jscodemine.grapecity.com/share/mpNp1KNJm0qbm0HYvAE1fA/

缪小花 · 缪小花

Ellia.Duan 发表于 2024-9-18 09:27
您好，请参考这篇demo:
https://jscodemine.grapecity.com/share/mpNp1KNJm0qbm0HYvAE1fA/

收到，谢谢版主，就是这个功能！
Demo似乎还缺少表格缩放随动和清除选区功能，后者我自己改造一下，前者是否可以给个思路，谢谢！

Ellia.Duan · Ellia.Duan

本帖最后由 Ellia.Duan 于 2024-9-18 13:35 编辑

您好，可以监听viewzoomed事件。如果要清除选择区域，可以使用clearSelection方法

缪小花 · 缪小花

Ellia.Duan 发表于 2024-9-18 13:34
您好，可以监听viewzoomed事件。如果要清除选择区域，可以使用clearSelection方法

问题已解决，谢谢大佬

Ellia.Duan · Ellia.Duan

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

[已处理] 【V16】请问是否有办法无侵入式设置单元格/区域高亮

最佳答案

5 个回复

SpreadJS 认证

SpreadJS 高级认证