slickgrid - 以单元格为中心的浮动 DIV 或表格答案

【问题标题】：slickgrid - floating DIV or Table centered on cellsslickgrid - 以单元格为中心的浮动 DIV 或表格
【发布时间】：2012-08-04 04:24:48
【问题描述】：

我正在使用 Slickgrid 并试图实现下面的视觉效果。

蓝点可以是任何图标/按钮。

关键问题是如何创建一个始终以选定单元格为中心的浮动 DIV...或一个以选定单元格为中心单元格的 3x3 表格。

关于如何开始的任何建议？

非常感谢！

附：我试图通过两种方式解决这个问题：

1) 自定义格式化程序

function styleFormatter(row, cell, value, columnDef, dataContext) {

    var button = "<button class='button' title='Manage comments'></button>";


    if (value == null || value === "") {

        return "";

    } else {
            return "<div class='classValueFormat'><div class='divButton'>" + button + "</span>" + value + "</div>";
        }

    }
}

divButton 的 CSS 将 margin-top 设置为负值，试图将其推出单元格边框。这里的问题是边距将单元格的主要内容向下或向上推，因此无法看到。我认为自定义格式化程序是不可行的，因为它强制任何内容都在单元格边界内。

2) 按照 Santiago 的建议和 Michael 在上下文菜单示例中演示的那样获取 x 和 y 位置是一个想法，但我放弃了，因为我无法触发 DIV 出现在导航上，而且还因为它没有使用滚动页面时与单元格一起移动。

【问题讨论】：

What have you tried?
已尝试创建自定义格式化程序，以设置具有负边距的
样式以将按钮定位在单元格外部...但是这会将单元格的主要内容向下或向上推，因此无法看到。
上述问题意味着您应该发布您的编码工作以帮助我们帮助您；）
用方法和代码编辑。锄头这有助于帮助:-)

标签： javascript html jquery-ui slickgrid

【解决方案1】：

单独创建覆盖 DIV 并将其附加到文档正文。然后，监听onActiveCellPositionChanged 事件并使用getActiveCellPosition 重新定位覆盖。

【讨论】：

【解决方案2】：

我没有尝试过，这听起来可能违反直觉，但也许您可以使用编辑器而不是格式化程序。编辑器实际上不会编辑数据，但可以在单元格位置上方呈现您需要的 HTML。您必须在编辑器中处理导航，但我认为这是可行的。请参见示例 3，尤其是描述字段编辑器（当页面滚动时它会移动）。

【讨论】：

【解决方案3】：

您能否获取鼠标位置并将此值通过.css() 或类似的方式发送到 div 的 position-x 和 position-y ？

再想一想：我猜你需要使用的是.focus() function

【讨论】：

感谢 Santiago，我已经编辑了这个问题并解释了我在使用这种方法时遇到的困难。