У меня есть меню, которое реализует Datatables. Вы можете нажать MenuItems, чтобы открыть его SubItems:
Для реализации этого я использовал Руководство по дочерним строкам из Datatables.
Итак, мне нужно вместо того, чтобы щелкнуть MenuItem, чтобы открыть его SubItems ниже, я хочу иметь возможность просто навести курсор на MenuItem и показать его SubItems справа этого, как в примерах ниже:
Следует отметить, что мое меню имеет высоту 100 %, поэтому мне нужно убедиться, что SubItems не отображаются под окном просмотра:
И вместо этого появиться что-то вроде этого:
Я попытался вручную расположить дочернюю строку и найти способ отобразить дочернюю строку в div, а не в строке, но я не смог понять это .
Ниже приведен код, чтобы получить то, что у меня есть:
После того, как я инициализирую свою таблицу данных, я запускаю функцию childRowToggle () JS для достижения дочерней строки при нажатии:
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');
}
});
}
childRowToggle () запускает функцию ниже и возвращает необходимые элементы. Я надеюсь, что эту функцию можно использовать повторно:
function returnChildRowElements(d) {
// `d` is the original data object for the row
var subItems = ['SubItem1', 'SubItem2', 'SubItem3', 'SubItem4'];
var tableRows = "";
pages.forEach(function (subItem) {
tableRows +=
'<tr><td>' +
'<a href="/ControllerName/' + subItem + '/' + d.value["ID"] + '">' + subItem + '</a>' +
'</td></tr>';
});
return '<table class="subItemTable">' + tableRows + '</table>';
}