高效整理数据，优化HTML表格展示

**高效整理数据优化HTML表格展示：PHP数据重组策略提升用户体验** 在Web开发中，HTML表格常用于展示数据，但当数据包含重复主键时，直接展示会导致信息冗余。本文针对此问题，提出了两种PHP数据重组策略，旨在优化HTML表格展示效果。首先，将扁平化的用户与位置记录数组按用户分组，并分别实现：策略一，同一用户在同一日期的多个位置信息在表格中视觉对齐显示；策略二，将同一用户在同一日期的所有位置信息合并至一个单元格内。文章详细阐述了数据重组函数的设计与实现，并提供了相应的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'
      ],
   ];

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

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

或更进一步的合并显示：

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

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) 判断是否是该用户组的第一条记录，从而决定是否显示姓名和日期。

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

输出效果：

注意事项：

• 这种方法通过生成多行并留空单元格来达到视觉分组效果。
• 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;

输出效果：

注意事项：

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

3. 总结与最佳实践

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

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

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

好了，本文到此结束，带大家了解了《高效整理数据，优化HTML表格展示》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！