slickgrid - 以细胞为中心的浮动DIV或表格

Question

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

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

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

有关如何入门的任何建议？

非常感谢！

P.S。我试图通过两种方式解决这个问题：

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设置为负数，试图将其推出Cell边界。这里的问题是边距向下或向上推动单元的主要内容，因此无法看到。我认为自定义格式化程序是不可行的，因为它强制任何内容都在单元格边框内。

2）按照圣地亚哥的建议获得x和y位置，迈克尔在上下文菜单示例中演示了一个想法，但我放弃了，因为我无法触发DIV出现在导航上，也因为它没有调整大小单元格或在滚动页面时随单元格移动。

Answer 1

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

Answer 2

你能得到鼠标位置并通过.css()或类似的东西将这些值发送到div的position-x和position-y吗？

第二个想法：我想你需要使用的是.focus() function

Answer 3

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