利用公式追踪实现单击标注公式引用信息
相信使用过公式的小伙伴应该对下图不陌生，双击进入有公式的单元格编辑状态会高亮引用的单元格。有小伙伴想通过单击单元格，高亮显示对应的引用信息，应该怎么实现呢？我们可以通过CellClick事件监听单元格的单击事件，然后在单元格中通过getPrecedents判断单元格是否有公式引用的单元格，如果有，通过setBorder设置对应的边框。实现效果如下：
那么我们来看代码吧！首先我们添加一个公式和一些数值。然后，初始化一个颜色的数组，对应的颜色可以根据自己的喜好添加或者自己去测应用不同数量单元格的颜色。
var color = ["#0055FF","#008000","#B300CC","#800000","#00CC33"]
接下来就是监听CellClick事件，在事件里面我们通过getPrecedents判断是否有数值，有则遍历数组的长度去设置边框，边框的颜色用的就是我们前面预设好的颜色数组。当我们点击其他单元格的时候我们需要将表单前面显示的边框清除，也就是将边框的样式设置为empty，这样就大功告成了。
sheet.bind(GC.Spread.Sheets.Events.CellClick, function (sender, args) {
var childNodes = sheet.getPrecedents(args.row, args.col);
if(childNodes.length > 0){
spread.suspendPaint();
for(var i = 0; i < childNodes.length; i ++ ){
sheet.getRange(childNodes.row, childNodes.col, childNodes.rowCount, childNodes.colCount, GC.Spread.Sheets.SheetArea.viewport).setBorder(new GC.Spread.Sheets.LineBorder(color,GC.Spread.Sheets.LineStyle.medium), { all:true });
}
spread.resumePaint();
} else {
spread.suspendPaint();
sheet.getRange(0, 0, sheet.getRowCount(), sheet.getColumnCount(), GC.Spread.Sheets.SheetArea.viewport).setBorder(new GC.Spread.Sheets.LineBorder(GC.Spread.Sheets.LineStyle.empty), { all:true });
spread.resumePaint();
}
});
当然，这只是一个简单的示例demo，可能没有涵盖一些复杂的情况，大家可以根据自己的需求做调整。
最后，下载附件即可查看完整代码。
如果需要在编写公式的同时，然后去寻找引用单元格的话，是不是要在cellEdit事件中触发，因为我在公式基础上加了一层自己的公式认定方式:[=sum(A1)]，导致公式不会进行提示，但是我又想实现原生那种丝滑的效果，是不是只能通过在编辑公式单元格时通过正则匹配子单元格，然后给匹配内容和引用单元格边框加上同样的颜色 TheBeard 发表于 2021-7-26 17:54
如果需要在编写公式的同时，然后去寻找引用单元格的话，是不是要在cellEdit事件中触发，因为我在公式基础上 ...
这种 [=sum(A1)]情况只能通过正则去匹配判断了，因为这种表达式在SpreadJS认为是一个字符串，无法当做公式去解析 Derrick.Jiao 发表于 2021-7-26 18:16
这种 [=sum(A1)]情况只能通过正则去匹配判断了，因为这种表达式在SpreadJS认为是一个字符串，无法当做公 ...
嗯嗯，好的，我去探索探索 TheBeard 发表于 2021-7-27 09:21
嗯嗯，好的，我去探索探索
好的，有新问题欢迎到我们的求助中心发帖交流~
页:
[1]