在React-Data-Grid中实现动态列的教程-js教程-PHP中文网

在React-Data-Grid中实现动态列的教程

聖光之護

发布： 2025-10-30 14:58:01

原创

887人浏览过

在React-Data-Grid中实现动态列的教程

本教程详细阐述了如何在`react-data-grid`中处理嵌套数据结构，以实现动态列的展示。通过对原始数据进行转换，将嵌套的设备信息扁平化为行对象的顶级属性，并结合动态生成的列定义，最终实现在数据网格中灵活展示设备名称作为列标题，设备值作为行内容的需求。

在前端应用中，尤其是在使用数据表格组件如react-data-grid时，我们经常会遇到需要根据数据内容动态生成列的场景。当数据源包含嵌套数组时，例如一个日志条目中包含多个设备及其值，我们需要将这些设备名称作为独立的列，并将其对应的值填充到相应的行中。本教程将指导您如何通过数据转换和列定义，优雅地解决这一问题。

原始数据结构分析

我们首先来看一下原始的日志数据结构dailyLogsData。每个日志条目（对象）包含基本的日志信息（如id、date_created、usage_notes等），以及一个名为devices的数组。devices数组中的每个对象代表一个设备，包含device_name和device_value。

const dailyLogsData = [
  {
    id: 1,
    date_created: "01/15/2023",
    time_updated: "15:53:05",
    usage_notes: "sample notes",
    maintenance_notes: "sample notes",
    devices: [
      { device_name: "Port Engine", device_value: "0125", device_id: 1 },
      { device_name: "Generator", device_value: "0252", device_id: 2 },
      { device_name: "Water Maker", device_value: "0321", device_id: 3 },
      // ... 更多设备
    ],
  },
  // ... 更多日志条目
];

登录后复制

react-data-grid组件要求其columns prop中的key与rows prop中每个行对象的属性名相匹配。然而，dailyLogsData中的device_name和device_value是嵌套在devices数组中的，无法直接作为列键。

动态列定义

为了将devices数组中的每个device_name转换为独立的列，我们需要动态生成列定义。这可以通过遍历dailyLogsData中的任一日志条目的devices数组来完成。通常，我们会假设所有日志条目的设备列表结构是相同的，或者至少包含所有可能的设备类型。

// 假设第一个日志条目包含所有可能的设备类型
const deviceColumns = dailyLogsData[0].devices.map((item) => ({
  key: item.device_name.replace(/ /g, ""), // 生成唯一的键，移除空格
  name: item.device_name.toUpperCase(),    // 列头显示设备名称，转为大写
  // 其他可选的列属性，如 width, resizable, formatter 等
}));

// 组合固定列和动态生成的设备列
const allColumns = [
  { key: "id", name: "ID", width: 80 },
  { key: "date_time", name: "日期/时间", width: 180 },
  { key: "usage_notes", name: "使用备注", width: 200 },
  { key: "maintenance_notes", name: "维护备注", width: 200 },
  ...deviceColumns, // 动态添加设备列
];

登录后复制

在上述代码中，我们为每个设备创建了一个列定义。key属性通过移除device_name中的空格来确保其唯一性，例如 "Port Engine" 变为 "PortEngine"。name属性则用于在网格中显示列标题。

序列猴子开放平台

具有长序列、多模态、单模型、大数据等特点的超大规模语言模型

查看详情

行数据转换

这是实现动态列的关键步骤。我们需要将dailyLogsData中的每个日志条目转换成react-data-grid期望的行数据格式。这意味着每个行对象不仅要包含id、date_time等基本信息，还需要将devices数组中的每个device_value提升为行对象的顶级属性，其属性名与动态生成的列的key相对应。

const transformedRows = dailyLogsData.map((item) => {
  // 初始化一个包含基本信息的行对象
  const row = {
    id: item.id,
    date_time: `${item.date_created} | ${item.time_updated}`,
    usage_notes: item.usage_notes,
    maintenance_notes: item.maintenance_notes,
  };

  // 遍历设备的数组，将每个设备的名称作为键，设备的值作为对应属性的值
  item.devices.forEach((device) => {
    const deviceKey = device.device_name.replace(/ /g, "");
    row[deviceKey] = device.device_value;
  });

  return row;
});

登录后复制

通过这种方式，例如第一个日志条目中Port Engine的device_value "0125" 将被添加到行对象中，键为PortEngine，即row.PortEngine = "0125"。这样，转换后的transformedRows中的每个行对象都将包含所有动态列所需的数据。

集成到React-Data-Grid

现在，我们有了正确的列定义allColumns和转换后的行数据transformedRows，可以将它们传递给DataGrid组件。

import React from 'react';
import DataGrid from 'react-data-grid'; // 确保已安装并导入

function MyDynamicGrid() {
  const dailyLogsData = [
    // ... 您的 dailyLogsData
    {
      id: 1,
      date_created: "01/15/2023",
      time_updated: "15:53:05",
      usage_notes: "sample notes",
      maintenance_notes: "sample notes",
      devices: [
        { device_name: "Port Engine", device_value: "0125", device_id: 1 },
        { device_name: "Generator", device_value: "0252", device_id: 2 },
        { device_name: "Water Maker", device_value: "0321", device_id: 3 },
        { device_name: "Fuel Engine", device_value: "", device_id: 4 },
        { device_name: "Radiator", device_value: "", device_id: 5 },
      ],
    },
    {
      id: 2,
      date_created: "01/16/2023",
      time_updated: "15:53:05",
      usage_notes: "sample notes",
      maintenance_notes: "sample notes",
      devices: [
        { device_name: "Port Engine", device_value: "0125", device_id: 1 },
        { device_name: "Generator", device_value: "0252", device_id: 2 },
        { device_name: "Water Maker", device_value: "0321", device_id: 3 },
        { device_name: "Fuel Engine", device_value: "0321", device_id: 4 },
        { device_name: "Radiator", device_value: "0321", device_id: 5 },
      ],
    },
  ];

  // 1. 动态生成设备列定义
  const deviceColumns = dailyLogsData[0].devices.map((item) => ({
    key: item.device_name.replace(/ /g, ""),
    name: item.device_name.toUpperCase(),
    minWidth: 120, // 示例：设置最小宽度
    resizable: true, // 示例：允许调整列宽
  }));

  // 2. 组合所有列定义
  const allColumns = [
    { key: "id", name: "ID", width: 60, resizable: true },
    { key: "date_time", name: "日期/时间", width: 180, resizable: true },
    { key: "usage_notes", name: "使用备注", width: 200, resizable: true },
    { key: "maintenance_notes", name: "维护备注", width: 200, resizable: true },
    ...deviceColumns,
  ];

  // 3. 转换行数据
  const transformedRows = dailyLogsData.map((item) => {
    const row = {
      id: item.id,
      date_time: `${item.date_created} | ${item.time_updated}`,
      usage_notes: item.usage_notes,
      maintenance_notes: item.maintenance_notes,
    };

    item.devices.forEach((device) => {
      row[device.device_name.replace(/ /g, "")] = device.device_value;
    });

    return row;
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        columns={allColumns}
        rows={transformedRows}
        // 其他可选属性，如 enableVirtualization, rowHeight 等
      />
    </div>
  );
}

export default MyDynamicGrid;

登录后复制

注意事项

键的唯一性： 确保动态生成的列key是唯一的。如果device_name可能重复，或者包含特殊字符，您可能需要更复杂的逻辑来生成唯一的键。移除空格通常是一个好的开始。
数据完整性： 确保所有日志条目的devices数组结构一致，或者至少包含所有可能的设备类型，以便正确生成列定义。如果某些条目缺少特定设备，其对应的单元格将显示为空白，这通常是期望的行为。
性能优化： 对于非常大的数据集，在组件渲染时进行map和forEach操作可能会有性能开销。可以考虑使用useMemo钩子来缓存列定义和转换后的行数据，避免不必要的重复计算。
错误处理： 在实际应用中，您可能需要添加错误处理，例如当dailyLogsData为空或dailyLogsData[0].devices不存在时。
列属性定制： react-data-grid的列定义支持多种属性，如width、minWidth、resizable、formatter等。您可以根据需要为动态生成的列添加这些属性，以增强表格的功能和用户体验。

总结

通过本教程，我们学习了如何将包含嵌套数组的复杂数据结构转换为react-data-grid组件所需的扁平化格式，并动态生成列定义。核心思想在于将嵌套数据提升为行对象的顶级属性，并确保列key与这些属性名匹配。这种数据转换模式在处理各种动态表格展示需求时非常有用，能够帮助您构建更灵活、更强大的数据展示界面。

以上就是在React-Data-Grid中实现动态列的教程的详细内容，更多请关注php中文网其它相关文章！