在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'
],
];如果直接循环渲染，将会得到如下重复的表格：
| 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 |
这显然不是我们希望的最终效果。本文将提供两种有效的解决方案来优化这种显示。
解决方案一：分行显示，重复字段留空
这种方法的核心思想是先对数据进行预处理，将相同用户ID下的所有地点信息归集到一起。在渲染HTML时，对于每个用户的第一条地点记录，显示完整的用户姓名和日期；对于该用户的后续地点记录，则将姓名和日期对应的单元格留空，仅显示地点信息。
1. 数据重组
首先，定义一个函数 arrayChanger 来重组原始数组。该函数遍历原始数组，以 user_id 为键创建新的数组结构，并将每个用户的地点记录作为子数组存储。
立即学习“PHP免费学习笔记（深入）”；
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 = '
| Name | Date | Location | ||
|---|---|---|---|---|
| ' . $value['Name'] . ' | ' . $value['date'] . ' | ' . $value['Location'] . ' | ||
| ' . $value['Name'] . ' | ' : $html .= ''; ($i === 0) ? $html .= ' | ' . $value['date'] . ' | ' : $html .= ''; $html .= ' | ' . $value['Location'] . ' | '; $html .= '
效果预览：
| Name | Date | Location |
|---|---|---|
| John Doe | 2021-10-02 | Chicago |
| Houston | ||
| Rob Doe | 2021-10-02 | Dallas |
| Philadelphia |
注意事项： 这种方法通过在后续行中插入空单元格来模拟视觉上的合并效果，而不是使用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 = '
| Name | Date | Location |
|---|---|---|
| ' . $newArrayValue['Name'] . ' | ' . $newArrayValue['date'] . ' | ';
// 遍历该用户的所有地点，并用 连接 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 |
优点： 这种方法在HTML结构上更简洁，每个逻辑上的“组”只占用一行，避免了多余的
总结
本文介绍了两种在PHP中处理数组数据并以优化方式在HTML表格中展示的方法。
- 分行显示，重复字段留空：适用于希望每个子记录仍然占据独立表格行，但希望通过视觉上的留白来强调分组关系的场景。实现上需要更细致的行内逻辑控制。
- 单单元格合并显示：适用于将所有相关子信息高度聚合到表格的一个单元格内，通过换行符进行分隔的场景。这种方法通常使HTML结构更简洁，更符合“合并显示”的直观需求。
选择哪种方法取决于具体的业务需求和对表格视觉效果、语义结构的偏好。在实际开发中，数据预处理是关键一步，它将扁平化的原始数据转换为更适合前端渲染的分组结构，从而大大简化HTML生成逻辑并提升表格的可读性。
