本文旨在解决 react tabulator 在处理嵌套数据时，默认行号格式化器无法实现分级小数编号（如 1.1, 1.2）的问题。通过介绍一种数据预处理方法，我们将在数据加载到 tabulator 之前，递归地为每个嵌套行生成并添加自定义的 `rownum` 字段，从而实现灵活且清晰的层级行号显示，提升数据表格的可读性。
在使用 React Tabulator 构建数据树表格时，我们经常会遇到需要为嵌套数据（即父子行）显示分级行号的需求。例如，我们可能希望父行显示为 1.、2.，而其子行则显示为 1.1、1.2 或 2.1 等。然而，Tabulator 默认的 rownum 格式化器通常无法直接满足这种复杂的层级编号逻辑，可能导致子行显示为 0 或简单的独立编号，无法体现其父子关系。
为了实现这种自定义的分级小数编号，一种有效且灵活的策略是在数据加载到 Tabulator 之前，对原始数据进行预处理。通过递归遍历数据结构，我们可以为每个数据项动态地生成一个包含层级信息的行号，并将其作为一个新的字段（例如 rowNum）添加到数据对象中。随后，Tabulator 就可以直接渲染这个预处理过的 rowNum 字段。
实现分级行号的数据预处理
核心思路是创建一个递归函数，它将遍历所有父行及其子行，并根据它们的层级关系构建独特的行号字符串。
以下是一个具体的实现示例：
// 原始的嵌套数据
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) => {
// 构建当前行的行号
// 如果有父行号，则在父行号后添加 '.' 和当前索引 + 1
// 否则，直接使用当前索引 + 1 作为主行号
row.rowNum = (parentRowNum ? parentRowNum + '.' : '') + (index + 1);
// 如果当前行有子行，则递归调用自身处理子行
if (row._children) {
numberRows(row._children, row.rowNum);
}
});
};
// 调用函数处理数据
numberRows(tableData);
// 经过处理后的 tableData 将包含 rowNum 字段
// 例如：
// Parent 1 -> rowNum: "1"
// Children 1 -> rowNum: "1.1"
// Children 2 -> rowNum: "1.2"
// Grandchildren 1 -> rowNum: "1.2.1"在上述代码中，numberRows 函数接收两个参数：data（当前层级的数据数组）和 parentRowNum（可选，表示当前层级父级的行号）。它遍历 data 数组中的每个 row，根据 parentRowNum 和当前行的索引生成一个唯一的 rowNum，并将其赋值给 row 对象。如果 row 包含 _children 属性，函数会递归调用自身，将当前行的 rowNum 作为 parentRowNum 传递给子级，确保子行的编号正确地基于父行。
Tabulator 表格配置
数据预处理完成后，我们就可以将处理后的 tableData 加载到 Tabulator 中。在 Tabulator 的列定义中，只需创建一个新的列来显示我们添加的 rowNum 字段即可。
// 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 }
]
});在这个配置中：
- data: tableData：传入已经包含 rowNum 字段的数据。
- dataTree: true：启用 Tabulator 的数据树功能，使其能够正确渲染嵌套数据。
- dataTreeStartExpanded: true：在表格加载时，默认展开所有层级。
- columns 数组中新增了一个 { title: '', field: 'rowNum', width: 100, headerSort: false } 列，用于显示我们自定义的行号。headerSort: false 用于禁用此列的排序，因为在分级行号的场景下，按字符串排序可能不符合预期。
完整示例代码
为了方便测试，以下是包含 HTML 结构和 JavaScript 逻辑的完整示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Tabulator Custom Nested Row Numbers</title>
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<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" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
<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' }
];
// Add row numbers
const numberRows = (data, parentRowNum = '') => {
data.forEach((row, index) => {
row.rowNum = (parentRowNum ? parentRowNum + '.' : '') + (index + 1);
if (row._children) {
numberRows(row._children, row.rowNum);
}
});
};
// Process the data to add row numbers
numberRows(tableData);
// Tabulator table
const table = new Tabulator('#table', {
height: '300px',
data: tableData,
dataTree: true,
dataTreeStartExpanded: true,
columns: [
{ title: '', field: 'rowNum', width: 100, headerSort: false },
{ 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>注意事项与总结
- 数据修改： 这种方法直接修改了原始数据对象，为其添加了 rowNum 字段。如果需要保持原始数据不变，可以考虑在 numberRows 函数内部创建数据的深拷贝。
- 性能考量： 对于非常庞大的嵌套数据集，递归处理可能会有性能开销。在极端情况下，可以考虑优化递归逻辑或分批处理数据。
- 灵活性： 这种预处理方式非常灵活，不仅可以实现小数编号，还可以根据需要定制其他复杂的编号格式，例如罗马数字、字母编号等，只需修改 numberRows 函数中的字符串拼接逻辑即可。
- 与 rownum 格式化器对比： 此方法绕过了 Tabulator 内置的 rownum 格式化器。内置的 rownum 适用于简单的行计数，而对于复杂的层级编号，数据预处理提供了更强的控制力。
- React 集成： 如果在 React 环境中使用 React Tabulator 组件，您需要在组件的 useEffect 或 componentDidMount 生命周期中执行数据预处理，并在 columns prop 中定义 rowNum 列。
通过上述数据预处理方法，我们能够有效地为 React Tabulator 中的嵌套数据实现自定义的分级小数编号显示，极大地提升了数据表格的可读性和用户体验。这种策略不仅解决了特定问题，也为处理 Tabulator 中其他复杂的数据显示需求提供了一个通用的思路。
