PHP合并日期地点数据，优化表格展示方法

哈喽！今天心血来潮给大家带来了《PHP合并用户日期多地点数据，优化表格展示》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

在Web开发中，我们经常需要将后端获取的复杂数据结构以清晰、易读的方式呈现在前端页面上。当数据中包含需要按特定字段（如用户ID、日期）进行分组，并合并显示相关联的子记录时，传统的循环渲染方式可能会导致信息冗余，降低表格的可读性。例如，以下是一个包含用户和地点信息的原始数组：

$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'
      ],
   ];

如果直接循环渲染，将会得到如下重复的表格：

这显然不是我们希望的最终效果。本文将提供两种有效的解决方案来优化这种显示。

解决方案一：分行显示，重复字段留空

这种方法的核心思想是先对数据进行预处理，将相同用户ID下的所有地点信息归集到一起。在渲染HTML时，对于每个用户的第一条地点记录，显示完整的用户姓名和日期；对于该用户的后续地点记录，则将姓名和日期对应的单元格留空，仅显示地点信息。

1. 数据重组

首先，定义一个函数 arrayChanger 来重组原始数组。该函数遍历原始数组，以 user_id 为键创建新的数组结构，并将每个用户的地点记录作为子数组存储。

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

2. HTML表格生成

重组数据后，我们可以遍历 arrayChanger 返回的新数组来生成HTML表格。关键在于使用一个计数器 $i 来判断是否是当前用户的第一个地点记录。

$html = '';

// 遍历重组后的数组，外层循环按用户分组
foreach (arrayChanger($arr) as $newArrayKey => $newArrayValue) {
    // 如果用户只有一个地点，直接渲染一行
    if (count($newArrayValue['dataArray']) <= 1) {
        $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的 rowspan 属性。虽然视觉效果相似，但在语义上，每个地点仍然占据一个独立的表格行。如果需要严格的语义合并，可以考虑在生成HTML时动态计算并应用 rowspan。

解决方案二：单单元格合并显示所有地点

这种方法更加直接，它将一个用户在特定日期下的所有地点信息合并到一个 单元格内，通过
标签进行换行，从而实现更紧凑的显示。

1. 数据重组（优化版）

这次的 arrayChanger 函数略有不同，它直接将所有地点信息收集到一个名为 UserLocations 的子数组中，同时保留用户和日期等基本信息。

function arrayChanger($oldArray)
{
    $newArray = array();
    foreach ($oldArray as $v) {
        // 如果该用户ID尚未存在于新数组中，则初始化其基本信息和地点数组
        if (!isset($newArray[$v['user_id']])) {
            $newArray[$v['user_id']] = array(
                'user_id' => $v['user_id'],
                'l_id' => $v['l_id'], // 这里的l_id可能不再有实际意义，取决于需求
                'Name' => $v['Name'],
                'date' => $v['date'],
                'UserLocations' => array() // 专门用于存储该用户的所有地点
            );
        }
        // 将当前地点信息添加到UserLocations数组中
        $newArray[$v['user_id']]['UserLocations'][] = array(
            'Location' => $v['Location'],
        );
    }
    return $newArray;
}

2. HTML表格生成

有了重组后的数据，生成HTML表格变得非常简洁。每个用户只对应表格中的一行，所有地点信息都在“Location”列中通过
标签分隔。

$html = '';

// 遍历重组后的数组，每个外层元素代表一个用户的所有信息
foreach (arrayChanger($arr) as $newArrayKey => $newArrayValue) {
    $html .= '';
}

$html .= '

    

        

            
Name
            
Date
            
Location
        
    

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

        // 遍历该用户的所有地点，并用
连接
        foreach ($newArrayValue['UserLocations'] as $key => $value) {
            $html .= $value['Location'] . "
";
        }

    $html .= '
        
';

echo $html;

效果预览：

优点： 这种方法在HTML结构上更简洁，每个逻辑上的“组”只占用一行，避免了多余的 标签，并且直接在单个单元格内完成了内容的合并显示。对于需要将所有相关信息集中展示在一个单元格内的场景，这是更优的选择。

总结

本文介绍了两种在PHP中处理数组数据并以优化方式在HTML表格中展示的方法。

1. 分行显示，重复字段留空：适用于希望每个子记录仍然占据独立表格行，但希望通过视觉上的留白来强调分组关系的场景。实现上需要更细致的行内逻辑控制。
2. 单单元格合并显示：适用于将所有相关子信息高度聚合到表格的一个单元格内，通过换行符进行分隔的场景。这种方法通常使HTML结构更简洁，更符合“合并显示”的直观需求。

选择哪种方法取决于具体的业务需求和对表格视觉效果、语义结构的偏好。在实际开发中，数据预处理是关键一步，它将扁平化的原始数据转换为更适合前端渲染的分组结构，从而大大简化HTML生成逻辑并提升表格的可读性。

今天关于《PHP合并日期地点数据，优化表格展示方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！