本教程旨在解决 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 字段即可。
首先，我们需要一个包含嵌套结构的原始数据。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' }
];创建一个递归函数，该函数将遍历数据数组，为每个元素计算其层级编号并存储在 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。
在 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 属性来传递配置。核心的数据结构和列定义逻辑是相同的。
为了方便测试和理解，这里提供一个完整的 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>通过上述方法，您可以轻松地在 React Tabulator 的嵌套数据中实现自定义的、具有小数位层级结构的行号显示，从而提升表格的可读性和用户体验。
以上就是React Tabulator 嵌套数据行号自定义：实现层级小数位编号的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
425
收藏
