Select 树中的数据表行 Table 插件

Question

我发现了一个在数据 tables 中创建分层树结构的插件。这里的好处，与大多数替代方案不同，它将父引用保留在子对象中，而不是相反。

由于我的数据 table 知识有限，更不用说数据 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

我是插件作者，我已经根据您的建议更新了插件，现在默认情况下只有在单击图标时才会切换行。

"I need to be able to differentiate between selecting the row itself and the tree controller, column name, etc. As well as bringing through critical row information (title, salary, and so on)."

要突出显示当前选定的行并记录选定的行信息：

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

希望对您有所帮助！

Select 树中的数据表行 Table 插件

Select Datatable Row In Tree Table Plugin

datatable

datatables

treetable