React Tabulator 嵌套数据分级行号定制：实现小数编号显示-js教程-PHP中文网

React Tabulator 嵌套数据分级行号定制：实现小数编号显示

聖光之護

发布： 2025-12-02 13:24:03

原创

607人浏览过

React Tabulator 嵌套数据分级行号定制：实现小数编号显示

本文旨在解决 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 传递给子级，确保子行的编号正确地基于父行。

Otter.ai

一个自动的会议记录和笔记工具，会议内容生成和实时转录

查看详情

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 中其他复杂的数据显示需求提供了一个通用的思路。

以上就是React Tabulator 嵌套数据分级行号定制：实现小数编号显示的详细内容，更多请关注php中文网其它相关文章！