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

Richard.Huang

本帖最后由前端小蚂蚁于 2024-4-25 10:48 编辑

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

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

3b0c282e120ec6fb620c5b2d540a768.jpg358832396.png

3b0c282e120ec6fb620c5b2d540a768.jpg358832396.png

Richard.Huang · Richard.Huang

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

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

Richard.Huang · Richard.Huang

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

前端小蚂蚁 · 前端小蚂蚁

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

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

Richard.Huang · Richard.Huang

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

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

前端小蚂蚁 · 前端小蚂蚁

本帖最后由前端小蚂蚁于 2024-4-25 13:41 编辑

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元素来显示内容，有没有好的案列可以看

Richard.Huang · Richard.Huang

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

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

window.addEventListener('mousemove', e => {
var target = spread.hitTest(e.clientX, e.clientY);
if (target && target.worksheetHitInfo) {
if (target.worksheetHitInfo.hitTestType === 0) {
str = 'corner';
} else if (target.worksheetHitInfo.hitTestType === 1) {
str = 'colHeader';
} else if (target.worksheetHitInfo.hitTestType === 2) {
str = 'rowHeader';
} else {
str = 'viewport,row=' + target.worksheetHitInfo.row + ',col=' + target.worksheetHitInfo.col;
console.log(str);
}
}
});

复制代码

前端小蚂蚁 · 前端小蚂蚁

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

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

Richard.Huang · Richard.Huang

前端小蚂蚁发表于 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版本吗？

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

[已处理] 通过批注功能，增补展示修改记录

最佳答案

17 个回复

SpreadJS 认证

SpreadJS 高级认证