如何将Tabulator选中行数据POST至另一页面？

核心说明 #

table.getSelectedData()方法本身就会返回包含选中行数据的数组，你不需要额外通过jQuery.map去转换，这个方法的返回值就是你需要的数组。

实现POST请求的两种方案 #

方案1：使用jQuery AJAX（适合已引入jQuery的项目） #

直接在点击事件中发送POST请求：

document.getElementById("get-selected").addEventListener("click", function(){
    // 获取选中行的数组数据
    var selectedData = table.getSelectedData();
    
    // 校验是否有选中数据
    if(selectedData.length === 0){
        alert("请先选择需要提交的行");
        return;
    }

    // 发送POST请求到目标页面
    $.ajax({
        url: "你的目标页面URL", // 替换为实际的目标页面地址
        type: "POST",
        contentType: "application/json", // 后端接收JSON格式时使用
        data: JSON.stringify(selectedData), // 将数组转为JSON字符串
        success: function(response){
            console.log("数据提交成功", response);
            // 这里可以添加成功后的逻辑，比如跳转页面、提示用户等
        },
        error: function(xhr, status, error){
            console.error("数据提交失败", error);
        }
    });
});

如果后端需要接收表单格式的数据，调整data和contentType配置：

$.ajax({
    url: "你的目标页面URL",
    type: "POST",
    data: { selectedRows: selectedData }, // 将数组包装成对象，方便后端获取
    success: function(response){
        console.log("数据提交成功", response);
    },
    error: function(xhr, status, error){
        console.error("数据提交失败", error);
    }
});

方案2：使用原生Fetch API（无需jQuery） #

如果项目没有引入jQuery，可以用原生Fetch实现：

document.getElementById("get-selected").addEventListener("click", async function(){
    var selectedData = table.getSelectedData();
    
    if(selectedData.length === 0){
        alert("请先选择需要提交的行");
        return;
    }

    try {
        const response = await fetch("你的目标页面URL", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify(selectedData),
        });

        if(!response.ok){
            throw new Error(`请求失败：${response.status}`);
        }

        const result = await response.json();
        console.log("数据提交成功", result);
    } catch(error){
        console.error("数据提交失败", error);
    }
});

关键提示 #

• 确保目标页面的后端接口能正确接收数组格式的数据（JSON或表单数组）
• 可以根据实际需求添加加载提示、错误提示等交互逻辑

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