Плагин выбора строки в древовидной таблице

Question

Я нашел плагин, который создает иерархическую древовидную структуру в таблицах данных.Бонус здесь, в отличие от большинства альтернатив, он сохраняет родительскую ссылку у ребенка, а не наоборот.

https://github.com/reside-ic/tree-table

Поскольку у меня ограниченные знания таблиц данных, не говоря уже о данныхЗнание таблиц плагинов, я изо всех сил пытаюсь сделать несколько из основных (например, ввод события при выборе строки).

Я уже попробовал событие по щелчку, которое работает, однако это также вызывает триггеры дерева развертывания и закрытия.

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);
    }
)

Мне нужно иметь возможность различать выбор самой строки иконтроллер дерева, имя столбца и т. д. А также получение критической информации о строке (заголовок, оклад и т. д.).

Answer 1

Я автор плагина, и я обновил плагин в соответствии с вашим предложением, так что переключение строк теперь происходит по умолчанию только при нажатии значков.

"Мне нужно иметь возможность различатьвыбор самой строки и контроллера дерева, имени столбца и т. д., а также получение критической информации о строке (заголовок, зарплата и т. д.). "

Чтобы выделить текущую выбранную строку и зарегистрировать выбранную строкуinfo:

    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.log(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.log(dt.cell($(this)).data()); // data in selected cell
        }
    });

Надеюсь, это поможет!