如何在R Shiny的JS DataTable中仅选中单个父行

1. 实现初始全部展开子表格 #

DataTables默认加载后子表格处于折叠状态，要实现初始全展开，只需在表格初始化完成后，遍历所有父行并调用row().child.show()方法，同时切换展开按钮的样式（比如把折叠图标换成展开图标）。

2. 实现父行单选且禁止选中子行 #

通过配置DataTables的select选项，指定单选模式，并通过selector限制仅选中非子行的父行；同时监听行点击事件，阻止子行触发选中逻辑，确保选中状态与展开/折叠操作无关。

完整代码示例 #

<!-- HTML结构 -->
<table id="parentTable" class="display" style="width:100%">
    <thead>
        <tr>
            <th></th>
            <th>ID</th>
            <th>Name</th>
            <th>Position</th>
        </tr>
    </thead>
    <tbody>
        <!-- 父行数据示例 -->
        <tr>
            <td></td>
            <td>1</td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
        </tr>
        <tr>
            <td></td>
            <td>2</td>
            <td>Garrett Winters</td>
            <td>Accountant</td>
        </tr>
    </tbody>
</table>

<script>
// 初始化父表格
const parentTable = $('#parentTable').DataTable({
    // 启用选择功能
    select: {
        style: 'single', // 单选模式
        selector: 'tr:not(.child)' // 仅选中非子行的父行
    },
    // 配置展开按钮列
    columnDefs: [
        {
            className: 'dt-control',
            orderable: false,
            targets: 0
        }
    ],
    order: [[1, 'asc']]
});

// 初始化后自动展开所有父行
parentTable.rows().every(function() {
    const row = this;
    // 渲染子表格内容（替换成你的实际子表格逻辑）
    const childHtml = `
        <table class="childTable display" style="width:100%">
            <thead>
                <tr>
                    <th>Sub ID</th>
                    <th>Detail</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>${row.data()[1]}-1</td><td>Detail 1</td></tr>
                <tr><td>${row.data()[1]}-2</td><td>Detail 2</td></tr>
            </tbody>
        </table>
    `;
    // 添加子内容并展开
    row.child(childHtml).show();
    // 切换展开按钮样式，标识已展开状态
    $(row.node()).find('td.dt-control').addClass('dt-expanded');
});

// 处理展开/折叠事件，不影响选中状态
$('#parentTable tbody').on('click', 'td.dt-control', function(e) {
    e.stopPropagation(); // 阻止事件冒泡到父行，避免触发选中
    const tr = $(this).closest('tr');
    const row = parentTable.row(tr);

    if (row.child.isShown()) {
        row.child.hide();
        $(this).removeClass('dt-expanded');
    } else {
        row.child.show();
        $(this).addClass('dt-expanded');
    }
});

// 阻止点击子行触发选中
$('#parentTable').on('click', 'tr.child', function(e) {
    e.stopPropagation();
});

// 获取选中父行数据（用于后续按钮绑定）
function getSelectedParentRow() {
    const selectedRow = parentTable.row({ selected: true });
    return selectedRow.data() ? selectedRow.data() : null;
}

// 示例：绑定按钮操作
$('#actionBtn').on('click', function() {
    const rowData = getSelectedParentRow();
    if (rowData) {
        console.log('选中的父行数据:', rowData);
        // 执行你的业务逻辑
    } else {
        alert('请先选中一个父行');
    }
});
</script>

关键说明 #

• 初始全展开：通过rows().every()遍历所有父行，调用row().child.show()展开子表格，同时更新展开按钮样式，让用户直观识别状态。
• 单选父行：select.selector: 'tr:not(.child)'直接限制选中范围，配合e.stopPropagation()阻止子行和展开按钮的点击事件触发父行选中，确保选中状态独立于展开操作。
• 选中行追踪：通过row({ selected: true })可随时获取当前选中的父行数据，直接用于后续按钮绑定逻辑。

内容的提问来源于stack exchange，提问作者happyspace