如何在Thymeleaf多页表格中传递选中复选框值至Controller

问题根源 #

1. 分页切换时，旧页面的复选框DOM会被销毁，仅靠内存数组保存选中ID，无法在分页后恢复之前页面的选中状态，且新生成的复选框未绑定点击事件。
2. 当前代码未处理取消复选框选中的逻辑，导致数组中残留已取消的ID。

修复步骤 #

1. 重构JavaScript逻辑 #

使用事件委托监听动态生成的复选框，用全局变量持久化保存选中ID，监听分页切换事件并恢复选中状态：

// 全局变量保存所有选中的ID，避免分页切换丢失
let selectedIds = new Set(); // 使用Set避免重复添加

// 事件委托处理复选框点击，兼容动态生成的元素
$(document).on('change', '.tab1_chk', function() {
    const unitId = this.value;
    if (this.checked) {
        selectedIds.add(unitId);
    } else {
        selectedIds.delete(unitId);
    }
    // 更新提交按钮状态（可选）
    $('#Button').prop('disabled', selectedIds.size === 0);
});

// 监听分页切换事件（以DataTables为例，根据你使用的分页组件调整）
$('#example').on('draw.dt', function() {
    // 页面渲染后，恢复之前选中的复选框状态
    $('.tab1_chk').each(function() {
        if (selectedIds.has(this.value)) {
            this.checked = true;
        }
    });
});

// 提交按钮点击事件
$('#Button').click(function () {
    const form = $("#Form");
    const url = form.attr("action");
    // 将Set转为数组传递
    const idsArray = Array.from(selectedIds);
    $.post(url, {ids: idsArray}, function (data) {
        $("#msg").html(data);
        console.log(idsArray);
        // 提交后清空选中状态（可选）
        selectedIds.clear();
        $('.tab1_chk').prop('checked', false);
        $('#Button').prop('disabled', true);
    });
});

2. 表格代码优化（可选） #

确保分页组件初始化逻辑正确（以DataTables为例）：

<script>
$(document).ready(function() {
    $('#example').DataTable({
        paging: true,
        pageLength: 10
        // 其他分页配置按需添加
    });
});
</script>

3. Controller代码验证 #

当前Controller参数接收逻辑无需修改，确认参数名ids与前端传递一致即可：

@RequestMapping(method = RequestMethod.POST, value = "/submitAJAX")
public String submitRequest(Model model, 
                            @RequestParam(value="ids") int[] ids,
                            HttpServletRequest request) {
    // 处理选中ID的业务逻辑
    // ...
}

关键说明 #

• 使用Set存储选中ID，避免重复添加同一ID。
• 事件委托$(document).on('change', '.tab1_chk', ...)确保动态生成的复选框也能触发事件。
• 监听分页组件的draw事件（不同分页组件事件名可能不同），在页面重新渲染后恢复选中状态，让用户直观看到跨页选中的条目。

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