通过批注功能，增补展示修改记录

实现通过批注功能，增补展示修改记录,  场景：就是鼠标放在单元格上（前端发起网络请求）获取单元格的修改记录，然后把从后端拿到的数据展示在批注框里。我想问的是鼠标cover在单元格，通过什么方法拿到单元格的行号，列号，是用什么事件去监听吗？批注框里能自己写html 或者引入组件吗？看了批注是textArea


实现效果类似下面的弹窗：

前端小蚂蚁 发表于 2024-4-28 15:05
我看了你的代码，确实我的写法有问题，现在不会报错，目前的问题是鼠标放在单元格上，没有显示浮窗，你能 ...

您好，实际上就是前面用js写的TipCell的写法综合上面同学在V14版本、React框架中的写法两者结合起来的，没有别的需要注意的地方。附件是两者结合的demo，您可以参考一下

您好，我想咱们的TipCell这个自定义单元格类型的例子可能对您有帮助，它的效果就是您hover在单元格上他会给您提示一些hover的信息，您可以结合您的业务需求做对应的更改：https://demo.grapecity.com.cn/Sp ... ple/#/demos/tipCell

Richard.Huang 发表于 2024-4-25 10:47
您好，我想咱们的TipCell这个自定义单元格类型的例子可能对您有帮助，它的效果就是您hover在单元格上他会给 ...

hover 里的信息，支持自己写html吗？因为内容和样式要按照产品的设计来做

前端小蚂蚁 发表于 2024-4-25 10:51
hover 里的信息，支持自己写html吗？因为内容和样式要按照产品的设计来做

您可以点进我上面提供的那个示例中去看，实际上hover后弹出的信息框就是一个div，您可以在这个div中做您任意期望展示的内容

Richard.Huang 发表于 2024-4-25 12:56
您可以点进我上面提供的那个示例中去看，实际上hover后弹出的信息框就是一个div，您可以在这个div中做您 ...

有react的写法代码吗？


        $(this._toolTipElement).text("Cell [R:" + hitinfo.row + "] : [C:" + hitinfo.col + "]")
                .css("top", hitinfo.y + 15)
                .css("left", hitinfo.x + 15);

这个弹框里面的内容还是.text() ，里面只能接受字符串, 我要的是可以写入组件或者html元素来显示内容，有没有好的案列可以看

前端小蚂蚁 发表于 2024-4-25 13:38
有react的写法代码吗？

在这个例子中咱们可以看到$(this._toolTipElement)就是一个div，您可以传字符串，也可以用原生的js方法在这个div中添加您要的html元素，而并不只是可以传入字符串。我们目前没有React的写法，您可以根据这个例子做React框架中写法的转换，或者回到您主贴中的需求，您可以通过原生js方法监听鼠标hover位置，并返回对应的单元格索引位置

1. window.addEventListener('mousemove', e => {
   
2.     var target = spread.hitTest(e.clientX, e.clientY);
   
3.     if (target && target.worksheetHitInfo) {
   
4.         if (target.worksheetHitInfo.hitTestType === 0) {
   
5.             str = 'corner';
   
6.         } else if (target.worksheetHitInfo.hitTestType === 1) {
   
7.             str = 'colHeader';
   
8.         } else if (target.worksheetHitInfo.hitTestType === 2) {
   
9.             str = 'rowHeader';
   
10.         } else {
    
11.             str = 'viewport,row=' + target.worksheetHitInfo.row + ',col=' + target.worksheetHitInfo.col;
    
12.             console.log(str);
    
13.         }
    
14.     }
    
15. });

复制代码

Richard.Huang 发表于 2024-4-25 15:38
在这个例子中咱们可以看到$(this._toolTipElement)就是一个div，您可以传字符串，也可以用原生的js方法在 ...

监听鼠标位置我知道怎么做，现在的问题是，我根据你提供的tipCell链接里的代码写，发现
        var defaultStyle = sheet.getDefaultStyle();
        defaultStyle.cellType = new TipCellType();
new TipCellType() 这个构造方法拿不到报错，要怎么写，目前这个需求比较急，五一前要做完，希望老师多支持下，确实不熟悉这块。

前端小蚂蚁 发表于 2024-4-26 11:52
监听鼠标位置我知道怎么做，现在的问题是，我根据你提供的tipCell链接里的代码写，发现
        var defaultSty ...

这部分没有更多相关示例，目前只有这个JS的demo，您需要要自行集成到React环境中，React框架中自定义类型单元格的使用可以参考我们这里的学习指南示例
https://demo.grapecity.com.cn/sp ... -types/custom/react

Richard.Huang 发表于 2024-4-26 15:08
这部分没有更多相关示例，目前只有这个JS的demo，您需要要自行集成到React环境中，React框架中自定义类型 ...

我看了下，也试这写了，需要安装import GC from "@grapecity-software/spread-sheets"; 这个吗？ 里面用到了，我现在用的是14.2.6版本，有这个sorftware版本吗？