getCellBoundingRect 获取单元格坐标有误差？！！

登录

效果：点击单元格获取单元格的坐标，用绝对定位把放大镜放在单元格右侧(见图3)。
我已现在已经通过 "getCellBoundingRect" 获取到坐标(见图1)，显示正常情况下把FlexGrid表格封装成Vue组件。在调用组件的时候，发现通过“getCellBoundingRect”获取坐标已经不准确了(见图2)。

(图1)
(图2)
(图3)

KevinChen · KevinChen

您好，咱们可以换个逻辑实现：

flex.addEventListener(flex.hostElement, 'click', (e) => {
let $hit = flex.hitTest(e)
let $rowIndex = $hit.row
let $colIndex = $hit.col
if(Math.sign($rowIndex) === -1 || Math.sign($colIndex) === -1){
return false
} // 判断负数
/* 显示(放大镜)帮助索引 */
let rcCell = flex.getCellBoundingRect($rowIndex, $colIndex) // 单元格坐标
let host = flex.hostElement;
let hostLeft = host.getBoundingClientRect().left;
let hostTop = host.getBoundingClientRect().top;
let point = $hit.point;
this.helpIndex = {
left: rcCell.left + rcCell.width - hostLeft + 'px',
top: rcCell.top - hostTop + 'px'
}
})

复制代码

附件是完整Demo。

@city_CH2017 · @city_CH2017

@city_CH2017 · @city_CH2017

想问一下版主，这个“getCellBoundingRect”是怎么来算这个坐标的

KevinChen · KevinChen

您好，您的这个业务场景，我觉得是否可以考虑一下条件样式来实现呢？比如这个例子您参考一下看看：

https://demo.grapecity.com.cn/wi ... ionalStyling/purejs

如果觉得不合适，能否提供一个能重现问题的Demo，我们调试排查一下看看问题出在哪里。

@city_CH2017 · @city_CH2017

KevinChen 发表于 2019-9-11 09:59
您好，您的这个业务场景，我觉得是否可以考虑一下条件样式来实现呢？比如这个例子您参考一下看看：

http ...

条件样式可以把“放大镜”这个元素放在外面吗？也就是输入框右侧外面吗？

KevinChen · KevinChen

@city_CH2017 发表于 2019-9-11 11:23
条件样式可以把“放大镜”这个元素放在外面吗？也就是输入框右侧外面吗？

这个不行，元素只能放在cell内部，外侧属于另一个cell的区域，会盖住前一个cell的内容。

@city_CH2017 · @city_CH2017

KevinChen 发表于 2019-9-11 11:54
这个不行，元素只能放在cell内部，外侧属于另一个cell的区域，会盖住前一个cell的内容。

那就只能通过getCellBoundingRect 获取单元格坐标，使用绝对定位来显示了。我整理一下demo发给你

KevinChen · KevinChen

好的，您发一个Demo，我这边排查一下问题

@city_CH2017 · @city_CH2017

已上传Demo，你查看一下

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

[已处理] getCellBoundingRect 获取单元格坐标有误差？！！

最佳答案

15 个回复

本帖子中包含更多资源

点评

评分

本帖子中包含更多资源

本帖子中包含更多资源

微信认证勋章

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证