Question

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

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

我已经尝试了可以起作用的on click事件，但这也会触发展开和关闭树触发器。

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

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

“我需要能够区分选择行本身和树控制器，列名等。以及传递重要的行信息（标题，薪水等）。”

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

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

希望这会有所帮助！

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

1 个答案: