React Tabulator 嵌套数据自定义层级行号教程

本教程旨在解决react tabulator中嵌套数据（数据树）自定义层级行号显示的问题。当默认的行号格式化器无法满足“1.1”、“1.2”等小数点层级编号需求时，我们将通过在数据加载到tabulator之前进行预处理，递归地为每个父子行添加自定义的`rownum`字段，从而实现灵活且准确的层级行号显示。

解决 React Tabulator 嵌套数据自定义层级行号问题

在使用 React Tabulator 构建数据树（Nested data）时，我们经常需要为父行和子行显示具有层级关系的行号，例如“1”、“1.1”、“1.2”、“2”、“2.1”等。Tabulator 默认的 rownum 格式化器通常只提供简单的递增序号，并且在处理子行时可能会显示为“0”或无法满足复杂的层级编号需求。本教程将介绍一种通过数据预处理的方式，在将数据加载到 Tabulator 之前，为数据添加自定义的层级行号字段，从而实现灵活的层级编号显示。

问题场景描述

假设我们有一个包含父子关系的数据集，并希望在 Tabulator 中以树形结构展示，同时为每一行（包括子行）分配一个具有层级感的行号。例如：

1. 父项 1
   • 1.1. 子项 1
   • 1.2. 子项 2
2. 父项 2
   • 2.1. 子项 1

Tabulator 的内置功能可能难以直接实现这种带有小数点分隔的层级编号。

解决方案：数据预处理

由于 Tabulator 内部的格式化器可能无法直接处理这种复杂的层级编号逻辑，一个有效的替代方案是在数据加载到 Tabulator 之前，对原始数据进行递归处理，为每个数据项添加一个包含正确层级行号的自定义字段。

步骤一：准备原始数据

首先，定义您的原始数据集。这个数据集应该包含一个用于表示子项的特殊字段（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 的新字段，该字段将存储我们所需的层级行号。

// 添加行号的递归函数
const numberRows = (data, parentRowNum = '') => {
  data.forEach((row, index) => {
    // 构建当前行的行号
    // 如果有父级行号，则以“父级行号.”开头，否则直接是当前层级的序号
    row.rowNum = (parentRowNum ? parentRowNum + '.' : '') + (index + 1);

    // 如果当前行有子项，则递归调用自身处理子项
    if (row._children) {
      numberRows(row._children, row.rowNum);
    }
  });
};

// 调用函数处理数据
numberRows(tableData);

代码解析：

PPT.CN,PPTCN,PPT.CN是什么,PPT.CN官网,PPT.CN如何使用

一键操作，智能生成专业级PPT

198

查看详情

• numberRows(data, parentRowNum = ''): 函数接收两个参数，data 是当前需要处理的数据数组，parentRowNum 是可选的父级行号字符串，默认为空，表示处理顶级数据。
• data.forEach((row, index) => { ... }): 遍历当前层级的所有行。
• row.rowNum = (parentRowNum ? parentRowNum + '.' : '') + (index + 1);: 这是核心逻辑。
  • parentRowNum ? parentRowNum + '.' : '': 检查 parentRowNum 是否存在。如果存在（即不是顶级行），则在其后添加一个点 .。如果不存在，则为空字符串。
  • (index + 1): 获取当前行在当前层级中的索引（从1开始）。
  • 将这两部分拼接起来，形成最终的 rowNum，例如 "1"、"1.1"、"1.2.1" 等。
• if (row._children) { numberRows(row._children, row.rowNum); }: 如果当前行有 _children 属性，说明它有子项，则以当前行的 rowNum 作为新的 parentRowNum，递归调用 numberRows 函数处理子项。

步骤三：在 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: 确保将经过 numberRows 函数处理后的 tableData 传递给 Tabulator。
• dataTree: true: 必须启用数据树功能才能正确显示嵌套数据。
• dataTreeStartExpanded: true: （可选）如果希望表格默认展开所有层级，可以设置此项。
• { title: '', field: 'rowNum', width: 100, headerSort: false }: 定义一个新列，其 field 属性指向我们自定义的 rowNum 字段。title 可以为空字符串，或者根据需要设置。headerSort: false 可以防止用户对行号列进行排序，因为这可能会打乱层级结构。

步骤四：HTML 结构和 Tabulator 引入

确保您的 HTML 文件中包含 Tabulator 的 CSS 和 JavaScript 引用，以及一个用于渲染表格的 div 元素。

<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>

<div id="table"></div>

请注意，tabulator-tables 的版本号可能需要根据实际情况调整。

注意事项与总结

1. 数据不可变性（React 环境）: 如果您在 React 或其他前端框架中使用此方法，请注意数据不可变性。直接修改原始 tableData 可能不是最佳实践。在实际应用中，您可能需要先创建一个原始数据的深拷贝，然后对拷贝进行处理，或者在 useEffect 钩子中处理数据并更新 useState。
2. 性能考虑: 对于包含数万甚至数十万行的超大型数据集，递归处理可能会有轻微的性能开销。但在大多数常见的业务场景中，这种预处理方式的性能影响可以忽略不计。
3. 灵活性: 这种预处理方法非常灵活，您可以根据需要修改 numberRows 函数的逻辑，例如添加字母编号、罗马数字编号或其他复杂的编号方案。
4. 排序: 默认情况下，Tabulator 可能会尝试对行号列进行字符串排序。如果您的行号是“1”、“1.1”、“1.10”、“1.2”，字符串排序可能会导致“1.10”排在“1.2”之前。为了避免这种情况，建议将 headerSort 设置为 false，或者实现一个自定义的 sorter 函数来处理层级行号的正确排序逻辑。

通过上述数据预处理的方法，我们可以有效地解决 React Tabulator 中嵌套数据自定义层级行号的显示问题，实现更具可读性和专业性的数据表格展示。

以上就是React Tabulator 嵌套数据自定义层级行号教程的详细内容，更多请关注php中文网其它相关文章！