本教程旨在解决 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
这个 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 ( );};export default TabulatorComponent;
注意： 尽管示例代码中使用了 vanilla JS 的 Tabulator 实例化方式 (new Tabulator(…))，但在 React 环境中，您应该使用 react-tabulator 组件，并通过其 options 属性来传递配置。核心的数据结构和列定义逻辑是相同的。
完整示例代码 (Vanilla JS Tabulator)
为了方便测试和理解，这里提供一个完整的 HTML 和 JavaScript 示例，可以直接在浏览器中运行：
React Tabulator 自定义层级行号 body { font-family: sans-serif; margin: 20px; } #table { margin-top: 20px; }Tabulator 嵌套数据自定义行号示例
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 } ] });
注意事项与总结
数据预处理时机： 这种方法的核心在于在数据加载到 Tabulator 之前完成行号的生成。这意味着如果您在 Tabulator 中动态添加、删除或重新排序行，您需要重新运行 numberRows 函数来更新所有行号，然后刷新 Tabulator 的数据。性能考量： 对于非常庞大且深度嵌套的数据集，递归处理可能会有轻微的性能开销。但在大多数常见场景下，这种开销是可接受的。灵活性： 这种方法非常灵活。您可以根据需要修改 numberRows 函数，以生成不同格式的行号，例如罗马数字、字母序列或其他自定义编号方案。解耦： 将行号生成逻辑从 Tabulator 的渲染机制中解耦出来，使得代码更易于维护和测试。Tabulator 只需要渲染一个普通的字段，而无需关心其复杂的生成逻辑。替代方案： 理论上，Tabulator 的 formatter 属性可以用来定义复杂的渲染逻辑。但对于层级行号这种需要访问父级上下文才能确定自身编号的情况，直接在 formatter 中实现会非常复杂，甚至不可行，因为它通常只接收当前行的数据。因此，数据预处理是更推荐和简洁的方案。
通过上述方法，您可以轻松地在 React Tabulator 的嵌套数据中实现自定义的、具有小数位层级结构的行号显示，从而提升表格的可读性和用户体验。
以上就是React Tabulator 嵌套数据行号自定义：实现层级小数位编号的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540896.html
微信扫一扫 
支付宝扫一扫 
