本教程旨在解决 React Tabulator 在处理嵌套数据（树形结构）时，默认行号格式化器无法实现子行小数位层级编号的问题。我们将通过在数据加载到 Tabulator 之前进行预处理，递归地为每个父行和子行生成自定义的带小数位层级编号，并将其作为独立字段渲染，从而实现如“1.1”、“1.2”、“2.1”等效果。
在构建具有嵌套数据（例如树形表格）的用户界面时，使用 React Tabulator 是一个常见的选择。然而，当需要为这些嵌套行生成具有层级结构（如“1”、“1.1”、“1.2”、“2”、“2.1”）的自定义行号时，Tabulator 内置的 rownum 格式化器可能无法满足复杂的需求，尤其是在处理子行的编号时，它通常会显示为 0 或简单的独立计数。为了实现这种小数位层级编号，我们需要一种更灵活的方法，即在数据绑定到 Tabulator 之前，对原始数据进行预处理。
解决方案概述
核心思想是在将数据传递给 Tabulator 之前，通过一个递归函数遍历整个数据集。在遍历过程中，为每个数据项（包括父项和子项）计算并添加一个自定义的 rowNum 字段。这个 rowNum 字段将包含我们期望的层级小数位编号。之后，Tabulator 只需要渲染这个预先计算好的 rowNum 字段即可。
实现步骤
1. 准备原始数据结构
首先，我们需要一个包含嵌套结构的原始数据。Tabulator 通过 _children 字段来识别子行。
const tableData = [
{ name: 'Oli Bob', location: 'United Kingdom', gender: 'male', dob: '14/04/1984', _children: [
{ name: 'Mary May', location: 'Germany', gender: 'female', dob: '14/05/1982' },
{ name: 'Christine Lobowski', location: 'France', gender: 'female', dob: '22/05/1982' },
{ name: 'Brendon Philips', location: 'USA', gender: 'male', dob: '01/08/1980', _children: [
{ name: 'Margret Marmajuke', location: 'Canada', gender: 'female', dob: '31/01/1999' },
{ name: 'Frank Harbours', location: 'Russia', gender: 'male', dob: '12/05/1966' }
]
}
]
},
{ name: 'Jamie Newhart', location: 'India', gender: 'male', dob: '14/05/1985' },
{ name: 'Gemma Jane', location: 'China', gender: 'female', dob: '22/05/1982', _children: [
{ name: 'Emily Sykes', location: 'South Korea', gender: 'female', dob: '11/11/1970' }] },
{ name: 'James Newman', location: 'Japan', gender: 'male', dob: '22/03/1998' }
];2. 递归生成自定义行号
创建一个递归函数，该函数将遍历数据数组，为每个元素计算其层级编号并存储在 rowNum 字段中。
/**
* 递归地为表格数据添加层级行号
* @param {Array<Object>} data - 当前层级的数据数组
* @param {string} parentRowNum - 父级行的行号（例如 "1", "1.1"），顶级调用时为空
*/
const numberRows = (data, parentRowNum = '') => {
data.forEach((row, index) => {
// 构建当前行的行号
// 如果有父级行号，则以父级行号为前缀，加上 '.' 和当前索引+1
// 否则，直接使用当前索引+1
row.rowNum = (parentRowNum ? parentRowNum + '.' : '') + (index + 1);
// 如果当前行有子行，则递归调用自身处理子行
if (row._children) {
numberRows(row._children, row.rowNum);
}
});
};
// 调用函数处理原始数据
numberRows(tableData);这个 numberRows 函数接受两个参数：当前层级的数据数组 data 和可选的 parentRowNum。
- parentRowNum 用于构建子行的前缀，确保层级关系。
- forEach 循环遍历当前层级的所有行。
- row.rowNum 的计算逻辑是关键：如果存在 parentRowNum，则当前行号是 parentRowNum 加上 . 和当前行的索引加一；否则，它只是当前行的索引加一。
- 如果当前行有 _children，则递归调用 numberRows 函数，并将当前行的 rowNum 作为新的 parentRowNum 传递给子层级。
3. 配置 React Tabulator
在 React Tabulator 组件中，将预处理后的 tableData 传递给 data 属性，并为 rowNum 字段定义一个普通列。
import React, { useRef, useEffect } from 'react';
import { ReactTabulator } from 'react-tabulator';
import 'react-tabulator/lib/styles.css'; // 导入样式
import 'tabulator-tables/dist/css/tabulator.min.css'; // 导入 Tabulator 基础样式
// ... (tableData 和 numberRows 函数定义如上)
// 假设 numberRows(tableData) 已经执行，tableData 已经被添加了 rowNum 字段
const columns = [
{ title: '', field: 'rowNum', width: 100, headerSort: false }, // 渲染自定义的 rowNum 字段
{ title: 'Name', field: 'name', width: 150 },
{ title: 'Location', field: 'location', width: 140 },
{ title: 'Gender', field: 'gender', width: 100 },
{ title: 'Date Of Birth', field: 'dob', width: 140 }
];
const TabulatorComponent = () => {
const ref = useRef(null);
const options = {
height: '300px',
data: tableData, // 使用已经预处理过的 tableData
dataTree: true, // 启用数据树功能
dataTreeStartExpanded: true, // 默认展开所有节点
columns: columns,
};
return (
<ReactTabulator
ref={ref}
options={options}
data={tableData} // 再次传入 data，确保组件接收到更新后的数据
columns={columns}
/>
);
};
export default TabulatorComponent;注意： 尽管示例代码中使用了 vanilla JS 的 Tabulator 实例化方式 (new Tabulator(...))，但在 React 环境中，您应该使用 react-tabulator 组件，并通过其 options 属性来传递配置。核心的数据结构和列定义逻辑是相同的。
完整示例代码 (Vanilla JS Tabulator)
为了方便测试和理解，这里提供一个完整的 HTML 和 JavaScript 示例，可以直接在浏览器中运行：
<!DOCTYPE html>
<html>
<head>
<title>React Tabulator 自定义层级行号</title>
<link href="https://unpkg.com/tabulator-tables@5.6.0/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.6.0/dist/js/tabulator.min.js"></script>
<style>
body { font-family: sans-serif; margin: 20px; }
#table { margin-top: 20px; }
</style>
</head>
<body>
<h1>Tabulator 嵌套数据自定义行号示例</h1>
<div id="table"></div>
<script type="text/javascript">
const tableData = [
{ name: 'Oli Bob', location: 'United Kingdom', gender: 'male', dob: '14/04/1984', _children: [
{ name: 'Mary May', location: 'Germany', gender: 'female', dob: '14/05/1982' },
{ name: 'Christine Lobowski', location: 'France', gender: 'female', dob: '22/05/1982' },
{ name: 'Brendon Philips', location: 'USA', gender: 'male', dob: '01/08/1980', _children: [
{ name: 'Margret Marmajuke', location: 'Canada', gender: 'female', dob: '31/01/1999' },
{ name: 'Frank Harbours', location: 'Russia', gender: 'male', dob: '12/05/1966' }
]
}
]
},
{ name: 'Jamie Newhart', location: 'India', gender: 'male', dob: '14/05/1985' },
{ name: 'Gemma Jane', location: 'China', gender: 'female', dob: '22/05/1982', _children: [
{ name: 'Emily Sykes', location: 'South Korea', gender: 'female', dob: '11/11/1970' }] },
{ name: 'James Newman', location: 'Japan', gender: 'male', dob: '22/03/1998' }
];
// 添加行号的递归函数
const numberRows = (data, parentRowNum = '') => {
data.forEach((row, index) => {
row.rowNum = (parentRowNum ? parentRowNum + '.' : '') + (index + 1);
if (row._children) {
numberRows(row._children, row.rowNum);
}
});
};
// 执行行号预处理
numberRows(tableData);
// Tabulator 表格实例化
const table = new Tabulator('#table', {
height: '300px',
data: tableData, // 使用已经处理过的带行号的数据
dataTree: true, // 启用数据树功能
dataTreeStartExpanded: true, // 默认展开所有节点
columns: [
{ title: '', field: 'rowNum', width: 100, headerSort: false }, // 渲染自定义的 rowNum 字段
{ title: 'Name', field: 'name', width: 150 },
{ title: 'Location', field: 'location', width: 140 },
{ title: 'Gender', field: 'gender', width: 100 },
{ title: 'Date Of Birth', field: 'dob', width: 140 }
]
});
</script>
</body>
</html>注意事项与总结
- 数据预处理时机： 这种方法的核心在于在数据加载到 Tabulator 之前完成行号的生成。这意味着如果您在 Tabulator 中动态添加、删除或重新排序行，您需要重新运行 numberRows 函数来更新所有行号，然后刷新 Tabulator 的数据。
- 性能考量： 对于非常庞大且深度嵌套的数据集，递归处理可能会有轻微的性能开销。但在大多数常见场景下，这种开销是可接受的。
- 灵活性： 这种方法非常灵活。您可以根据需要修改 numberRows 函数，以生成不同格式的行号，例如罗马数字、字母序列或其他自定义编号方案。
- 解耦： 将行号生成逻辑从 Tabulator 的渲染机制中解耦出来，使得代码更易于维护和测试。Tabulator 只需要渲染一个普通的字段，而无需关心其复杂的生成逻辑。
- 替代方案： 理论上，Tabulator 的 formatter 属性可以用来定义复杂的渲染逻辑。但对于层级行号这种需要访问父级上下文才能确定自身编号的情况，直接在 formatter 中实现会非常复杂，甚至不可行，因为它通常只接收当前行的数据。因此，数据预处理是更推荐和简洁的方案。
通过上述方法，您可以轻松地在 React Tabulator 的嵌套数据中实现自定义的、具有小数位层级结构的行号显示，从而提升表格的可读性和用户体验。
