datatable - 在树表插件中选择数据表行

问题描述

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

由于我的数据表知识有限，更不用说数据表插件知识了，我正在努力做一些基础知识（例如在选择行时键入事件）。

我已经尝试过有效的点击事件，但这也会触发展开和关闭树触发器。

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

我需要能够区分选择行本身和树控制器、列名等。以及带来关键的行信息（标题、薪水等）。

标签： datatabledatatablestreetable

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

“我需要能够区分选择行本身和树控制器、列名等。以及带来关键的行信息（标题、薪水等）。”

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

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

希望这可以帮助！

datatable - 在树表插件中选择数据表行

问题描述

解决方案

推荐阅读