高效组织数据以优化HTML表格展示

花韻仙語

发布时间：2025-07-14 14:02:12

478人浏览过

来源于php中文网

原创

高效组织数据以优化html表格展示

本文详细介绍了如何将扁平化的用户与位置记录数组转换为适合HTML表格展示的分组结构。通过两种PHP数据重组策略，分别实现将同一用户在同一日期的多个位置信息在表格中进行视觉对齐或合并显示，并提供了相应的HTML生成代码，旨在提升数据展示的清晰度和可读性。

1. 问题背景与目标

在Web开发中，经常需要将数据库查询结果或API响应等数组数据展示到HTML表格中。当原始数据包含重复的主键信息（如同一用户在同一天的多条记录）时，直接遍历数组生成表格会导致信息冗余。例如，给定以下PHP数组结构：

$arr =
   [
      [
         'user_id' => 5,
         'l_id' => 10,
         'Name' => 'John Doe',
         'Location' => 'Chicago',
         'date' => '2021-10-02'
      ],
      [
         'user_id' => 5,
         'l_id' => 11,
         'Name' => 'John Doe',
         'Location' => 'Houston',
         'date' => '2021-10-02'
      ],
      [
         'user_id' => 6,
         'l_id' => 12,
         'Name' => 'Rob Doe',
         'Location' => 'Dallas',
         'date' => '2021-10-02'
      ],
      [
         'user_id' => 6,
         'l_id' => 13,
         'Name' => 'Rob Doe',
         'Location' => 'Philadelphia',
         'date' => '2021-10-02'
      ],
   ];

如果直接遍历此数组并为每条记录生成一行，将得到以下重复的表格输出：

Name	Date	Location
John Doe	2021-10-02	Chicago
John Doe	2021-10-02	Houston
Rob Doe	2021-10-02	Dallas
Rob Doe	2021-10-02	Philadelphia

我们的目标是优化表格展示，使得同一用户在同一日期的多条位置记录能够以更紧凑、更易读的方式呈现，例如：

Name	Date	Location
John Doe	2021-10-02	Chicago
		Houston

Rob Doe	2021-10-02	Dallas
		Philadelphia

或更进一步的合并显示：

立即学习“前端免费学习笔记（深入）”；

Name	Date	Location
John Doe	2021-10-02	Chicago Houston
Rob Doe	2021-10-02	Dallas Philadelphia

这需要对原始数据进行预处理，将其重组为更适合展示的结构。

2. 数据重组策略与HTML生成

解决此问题的核心在于数据预处理。我们将探讨两种不同的数据重组和HTML生成策略。

2.1 策略一：按用户分组并逐行展示（留空姓名和日期）

此策略的目标是为每个用户生成多行，但只在第一行显示用户的姓名和日期，后续行则留空对应的单元格，从而实现视觉上的对齐。

2.1.1 数据重组函数

首先，定义一个函数 arrayChanger 来将原始数组按 user_id 进行分组。每个 user_id 对应一个包含其所有相关记录的子数组。

function arrayChanger($oldArray) {
    $newArray = array();
    foreach ($oldArray as $v) {
        // 如果该user_id尚未在新数组中，则初始化其结构
        if (!isset($newArray[$v['user_id']])) {
            $newArray[$v['user_id']] = array(
                'user_id' => $v['user_id'],
                'dataArray' => array() // 用于存储该用户的所有记录
            );
        }
        // 将当前记录添加到对应user_id的dataArray中
        $newArray[$v['user_id']]['dataArray'][] = array(
            'l_id' => $v['l_id'],
            'Name' => $v['Name'],
            'Location' => $v['Location'],
            'date' => $v['date'],
        );
    }
    return $newArray;
}

这个函数将原始的扁平数组转换为以下结构（简化示例）：

[
    5 => [
        'user_id' => 5,
        'dataArray' => [
            ['Name' => 'John Doe', 'Location' => 'Chicago', ...],
            ['Name' => 'John Doe', 'Location' => 'Houston', ...],
        ]
    ],
    6 => [
        'user_id' => 6,
        'dataArray' => [
            ['Name' => 'Rob Doe', 'Location' => 'Dallas', ...],
            ['Name' => 'Rob Doe', 'Location' => 'Philadelphia', ...],
        ]
    ]
]

2.1.2 HTML生成逻辑

在生成HTML时，遍历重组后的数组。对于每个用户组，再遍历其内部的 dataArray。通过一个计数器 ($i) 判断是否是该用户组的第一条记录，从而决定是否显示姓名和日期。

绿色大气办公家具类企业织梦模板1.0

绿色大气办公家具类企业织梦模板是以织梦最新内核来进行开发的模板，该模板属于家具行业，装修企业，家装类，属于企业通用，装修设计、家具生产等企业均可以使用该模板，页面简洁简单，容易管理，DEDE5.5内核以上都可以使用；附带测试数据！模板特点：简洁美观大方小清新的设计风格，图片展示效果绝佳。页面结构简单，利于SEO的优化，模板后台易于管理。使用程序：织梦DEDECMS5.5以上版本都可以使用。温馨提示

下载

$html = '';

// 遍历按用户分组后的新数组
foreach (arrayChanger($arr) as $newArrayKey => $newArrayValue) {
    // 如果该用户只有一条记录，则直接生成一行
    if (count($newArrayValue['dataArray']) <= 1) {
        // 注意：这里需要从 $newArrayValue['dataArray'][0] 获取数据，因为只有一个元素
        $value = $newArrayValue['dataArray'][0]; 
        $html .= '';
    } else {
        // 如果用户有多条记录，则逐行生成，并对姓名和日期进行条件渲染
        $i = 0; // 计数器，用于判断是否为该用户的第一条记录
        foreach ($newArrayValue['dataArray'] as $key => $value) {
            $html .= '';
                // 只有第一条记录显示姓名
                ($i === 0) ? $html .= '' : $html .= '';
                // 只有第一条记录显示日期
                ($i === 0) ? $html .= '' : $html .= '';
                // 每条记录都显示位置
                $html .= '';
            $html .= '';
            $i = $i + 1; // 计数器递增
        }
    }
}
$html .= '
    
        
            Name
            Date
            Location
        
    

                    ' . $value['Name'] . '
                    ' . $value['date'] . '
                    ' . $value['Location'] . '
                
' . $value['Name'] . '   ' . $value['date'] . '   ' . $value['Location'] . '
';

echo $html;

Name	Date	Location
' . $value['Name'] . '	' . $value['date'] . '	' . $value['Location'] . '
' . $value['Name'] . '		' . $value['date'] . '		' . $value['Location'] . '

输出效果：

Name	Date	Location
John Doe	2021-10-02	Chicago
		Houston
Rob Doe	2021-10-02	Dallas
		Philadelphia

注意事项：

这种方法通过生成多行并留空单元格来达到视觉分组效果。
HTML结构是多行，每行仍然是独立的。
需要注意处理用户只有一条记录的边缘情况，以避免不必要的空单元格。

2.2 策略二：按用户分组并合并位置信息到单个单元格

此策略的目标是将同一用户在同一日期的所有位置信息合并到一个

2.2.1 数据重组函数（优化版）

此版本的 arrayChanger 函数在分组的同时，将所有位置信息收集到一个名为 UserLocations 的子数组中。

function arrayChanger($oldArray)
{
    $newArray = array();
    foreach ($oldArray as $v) {
        // 如果该user_id尚未在新数组中，则初始化其结构，并保留姓名和日期等公共信息
        if (!isset($newArray[$v['user_id']])) {
            $newArray[$v['user_id']] = array(
                'user_id' => $v['user_id'],
                'Name' => $v['Name'],
                'date' => $v['date'],
                'UserLocations' => array() // 用于存储该用户的所有位置信息
            );
        }
        // 将当前位置信息添加到对应user_id的UserLocations数组中
        $newArray[$v['user_id']]['UserLocations'][] = array(
            'Location' => $v['Location'],
        );
    }
    return $newArray;
}

这个函数将原始的扁平数组转换为以下更紧凑的结构（简化示例）：

[
    5 => [
        'user_id' => 5,
        'Name' => 'John Doe',
        'date' => '2021-10-02',
        'UserLocations' => [
            ['Location' => 'Chicago'],
            ['Location' => 'Houston'],
        ]
    ],
    6 => [
        'user_id' => 6,
        'Name' => 'Rob Doe',
        'date' => '2021-10-02',
        'UserLocations' => [
            ['Location' => 'Dallas'],
            ['Location' => 'Philadelphia'],
        ]
    ]
]

2.2.2 HTML生成逻辑

遍历重组后的数组，对于每个用户，直接生成一行。在生成“Location”单元格时，遍历 UserLocations 数组，并将所有位置信息用
标签连接起来。

$html = '';

// 遍历按用户分组后的新数组
foreach (arrayChanger($arr) as $newArrayKey => $newArrayValue) {
    $html .= '';
}

$html .= '
    
        
            Name
            Date
            Location
        
    

        ' . $newArrayValue['Name'] . '
        ' . $newArrayValue['date'] . '
        ';

        // 遍历UserLocations数组，将所有位置信息用
连接
        foreach ($newArrayValue['UserLocations'] as $key => $value) {
            $html .= $value['Location'] . "
";
        }

    $html .= '
        
';

echo $html;

Name	Date	Location
' . $newArrayValue['Name'] . '	' . $newArrayValue['date'] . '	'; // 遍历UserLocations数组，将所有位置信息用连接 foreach ($newArrayValue['UserLocations'] as $key => $value) { $html .= $value['Location'] . " "; } $html .= '

输出效果：

Name	Date	Location
John Doe	2021-10-02	Chicago Houston
Rob Doe	2021-10-02	Dallas Philadelphia

注意事项：

这种方法实现了将所有相关信息聚合到单个中，使得每个逻辑记录（用户+日期）只占用表格的一行。
Location 单元格的内容是HTML字符串，包含
标签用于换行。
这种方法在语义上更符合“一个用户一行”的直观理解。

3. 总结与最佳实践

在选择上述两种策略时，应根据具体的展示需求和用户体验目标来决定：

策略一（逐行展示，留空姓名和日期）：适用于需要保留表格行结构，但又希望减少重复信息的情况。视觉上，每个位置仍然独立占据一行，可能更利于某些特定样式或交互（例如，点击某一行只高亮某个位置）。
策略二（合并位置信息到单个单元格）：适用于追求表格紧凑性，将所有相关信息高度聚合的情况。这种方法使每个用户只占用表格的一行，更符合“一个用户一条记录”的语义。

无论选择哪种策略，核心思想都是在数据展示之前进行数据预处理。将原始的扁平数据结构转换为更适合特定展示需求的分组或聚合结构，是提升表格可读性和效率的关键。这种数据与视图分离的原则，不仅使代码更清晰，也为未来的功能扩展和维护提供了便利。在实际开发中，应尽量将数据处理逻辑与HTML生成逻辑分离，以实现更好的模块化。