本文详解如何正确使用 Tabulator 的 getRows("active") 和 isSelected() 方法，过滤出当前视图下被用户选中的行，并批量提取其数据、序列化为 JSON 后通过一次 AJAX 请求提交至服务端，避免重复请求与逻辑错误。
本文详解如何正确使用 tabulator 的 `getrows("active")` 和 `isselected()` 方法，过滤出当前视图下被用户选中的行，并批量提取其数据、序列化为 json 后通过一次 ajax 请求提交至服务端，避免重复请求与逻辑错误。
在使用 Tabulator 构建交互式表格时，一个常见需求是：当用户启用了过滤器（filter）并勾选了若干行后，点击按钮仅获取当前可见（即已过滤）且被选中的行数据，并统一提交至后端处理。初学者容易误将 AJAX 请求嵌套在循环判断中，导致多次无效请求、性能下降甚至数据错乱。
正确的实现逻辑应严格遵循三步分离原则：
- 获取活跃行集：调用 table.getRows("active") 获取当前过滤/搜索后可见的所有行（不包含被隐藏的行）；
- 筛选已选行：使用 filter() 遍历并保留 row.isSelected() === true 的行；
- 结构化映射 + 单次提交：对筛选结果调用 map() 提取所需字段，构造标准数据数组，最后执行唯一一次 AJAX 请求。
以下是优化后的完整代码示例：
document.getElementById("get-selected-rows").addEventListener("click", function() {
// 步骤1：获取当前过滤后可见的所有行（"active" 模式）
const rows = table.getRows("active");
// 步骤2：筛选出其中已被用户选中的行
const selectedRows = rows.filter(row => row.isSelected());
// 步骤3：映射为结构化数据对象数组（注意字段名拼写：FirtName → FirstName？请按实际 schema 调整）
const postData = selectedRows.map(row => {
const data = row.getData(); // 获取该行原始数据对象
return {
id: data.id,
FirtName: data.FirtName, // ⚠️ 注意：此处疑似拼写错误，建议核对字段名为 FirstName
LastName: data.LastName,
Age: data.Age,
City: data.City
};
});
// 单次异步提交 —— 关键！避免在循环内发起请求
$.ajax({
url: 'save_rows.php',
type: 'POST',
data: JSON.stringify(postData),
contentType: 'application/json',
success: function(response) {
console.log('✅ 成功提交', postData.length, '条选中记录');
alert(`已成功保存 ${postData.length} 条数据`);
},
error: function(xhr, status, error) {
console.error('❌ 提交失败:', error);
alert('保存失败，请检查网络或联系管理员');
}
});
});
? 关键注意事项：
- ✅ getRows("active") 是获取当前过滤/搜索状态下的可见行的唯一可靠方式；getRows()（无参数）会返回全部原始行，不符合“过滤后选中”的业务场景；
- ✅ isSelected() 必须作用于 RowComponent 实例（即 getRows() 返回的每个元素），不可误用于原始数据对象；
- ⚠️ 字段名需与 Tabulator 列定义及后端预期严格一致（如示例中 FirtName 很可能是 FirstName 的笔误，务必校验）；
- ⚠️ 若后端 PHP 接口（如 save_rows.php）未正确设置 json_decode(file_get_contents('php://input'), true)，将无法解析 JSON.stringify() 发送的数据；
- ? 进阶建议：可增加空选判断（如 if (selectedRows.length === 0) { alert('请至少选择一行'); return; }），提升用户体验。
通过以上结构化处理，你不仅能准确捕获用户意图，还能保障请求效率与代码可维护性，是 Tabulator 表格数据导出与同步的标准实践方案。
