数据表在悬停行旁边显示一个框

Question

我有一个实现Datatables的菜单。您可以单击MenuItems来显示其SubItems：

要实现此目的，我使用了Datatables中的Child row guide。

因此，我需要的不是代替单击MenuItem在下面显示其SubItems，而是希望能够悬停在MenuItem上并显示其{{1} }到它的右侧，如下例所示：

要注意的一件事是我的菜单高度为100％，因此我需要确保SubItems不会出现在视口下方：

而是显示如下内容：

我尝试手动定位子行，并寻找一种方式来显示div（而不是行）中的子行，但我无法弄清楚。

下面的一些代码来获取我现在拥有的东西：

初始化数据表后，我运行childRowToggle（）JS函数以实现单击时的子行：

SubItems

childRowToggle（）运行下面的函数并返回所需的元素。我希望可以重用此功能：

function childRowToggle(tableObj) {
    var tableId = tableObj.table().node().id;

    //if ".details-control" is removed and only "tr" is left, the child row automatically closes when an item is clicked.
    $('#'+tableId + ' tbody').on('click', 'tr.details-control', function () {
        var tr = $(this).closest('tr');
        var row = tableObj.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {            
            //if another child row already open, close it (not much explanation but it works: https://datatables.net/forums/discussion/34367/keep-only-one-child-row-opened-at-a-time)
            if (tableObj.row('.shown').length) {
                $(tableObj.row('.shown').node()).click();
            }

            var childData = returnChildRowElements(row.data());
            // Open this row
            row.child(childData, 'menuItemChildRow').show();
            tr.addClass('shown');
        }
    });
}

Answer 1

您可以将on click事件处理程序更改为on mouseover吗？

$('#'+tableId + ' tbody').on('mouseover', 'tr.details-control', function () {
    // Handle event here
}

https://api.jquery.com/mouseover/