Я нашел плагин, который создает иерархическую древовидную структуру в таблицах данных. Преимущество здесь, в отличие от большинства альтернатив, заключается в том, что ссылка на родителя сохраняется в дочернем элементе, а не наоборот.
https://github.com/reside-ic/дерево-таблица
Поскольку у меня ограниченное знание таблиц данных, не говоря уже о знании плагинов таблиц данных, я изо всех сил пытаюсь сделать несколько основ (например, ввести событие при выборе строки).
Я уже пробовал событие по щелчку, которое работает, однако оно также запускает триггеры расширения и закрытия дерева.
const myData = [
{
tt_key: "a",
tt_parent: 0,
name: "CEO",
salary: "10000"
},
{
tt_key: "b",
tt_parent: "a",
name: "CTO",
salary: "100"
},
{
tt_key: "c",
tt_parent: 0,
name: "Developer",
salary: "3000"
},
{
tt_key: "d",
tt_parent: "a",
name: "CFO",
salary: "10000"
}];
var table = $('#my-table').treeTable
(
{
select: true,
"data": myData,
"columns":
[
{
data: "name",
title: "Example",
},
{
data: "salary",
title: "Second Example",
}
]
}
);
table.on
(
'click', function(e, dt, type, indexes)
{
alert(type);
}
)
Мне нужно иметь возможность различать выбор самой строки и контроллера дерева, имени столбца и т. д. А также передавать важную информацию о строке (название, зарплата и т. д.).





Я автор плагина, и я обновил плагин в соответствии с вашим предложением, так что переключение строк теперь происходит по умолчанию только при нажатии на значки.
«Мне нужно иметь возможность различать выбор самой строки и контроллера дерева, имени столбца и т. д., а также передавать важную информацию о строке (название, зарплата и т. д.)».
Чтобы выделить текущую выбранную строку и записать информацию о выбранной строке:
const dt = $('#my-table').DataTable();
$('#my-table tbody').on('click', 'tr', function () {
const $row = $(this);
if ($row.hasClass('selected') ) {
$row.removeClass('selected');
}
else {
dt.$('tr.selected').removeClass('selected');
$row.addClass('selected');
console.info(dt.row($row).data()); // data in selected row
}
});
Точно так же для регистрации информации о конкретной ячейке в событии клика:
const dt = $('#my-table').DataTable();
$('#my-table tbody').on('click', 'td:not(.tt-details-control)', function () {
console.info(dt.cell($(this)).data()); // data in selected cell
}
});
Надеюсь это поможет!
Спасибо, Алекс, возможно, есть лучший способ связаться с вами напрямую? У меня есть несколько вопросов о плагине, которые я не считаю нужным обсуждать.
Не могли бы вы открыть проблему GitHub? Очень ценим обратную связь, так как это поможет нам улучшить плагин или, по крайней мере, улучшить документацию, если что-то отсутствует!
(Также обратите внимание, что репозиторий перемещен в github.com/reside-ic/TreeTables, а пакет npm теперь доступен в npmjs.com/package/treetables)