如何正确显示多维数组中的数据，一直是任何一个Web开发人员的经典问题。为了说明问题，假设你希望显示一个客户和他们的购买清单。对于每个客户，你希望显示他们的姓名、电话号码、账户余额等。这已经代表了一个二维数组，其中x轴代表客户，y轴代表该客户的数据。现在加入购买的数据，你就有了第三个轴! 如何在二维屏幕上表示一个三维模型？一个可能的解决方案是将 "隐藏 "的分割标签与一个简单的JavaScript可见性切换结合起来。
如何做...
1.首先，我们需要从一个使用了许多JOIN子句的SQL语句中生成一个3D数组。我们将使用第1章 《建立基础》中介绍的 Application/Database/Connection 来制定一个合适的SQL查询。为了支持分页，我们开放了两个参数：min和max。不幸的是，在这种情况下，我们不能使用简单的LIMIT和OFFSET，因为行数会根据任何给定客户的购买数量而变化。相应地，我们可以通过对客户ID的限制来限制行数，这个限制大概（希望）是递增的。为了使这个工作正常进行，我们还需要将主order 设置为customer ID。
define('ITEMS_PER_PAGE', 6);
define('SUBROWS_PER_PAGE', 6);
define('DB_CONFIG_FILE', '/../config/db.config.php');
include __DIR__ . '/../Application/Database/Connection.php';
use Application\Database\Connection;
$conn = new Connection(include __DIR__ . DB_CONFIG_FILE);
$sql = 'SELECT c.id,c.name,c.balance,c.email,f.phone, '
. 'u.transaction,u.date,u.quantity,u.sale_price,r.title '
. 'FROM customer AS c '
. 'JOIN profile AS f '
. 'ON f.id = c.id '
. 'JOIN purchases AS u '
. 'ON u.customer_id = c.id '
. 'JOIN products AS r '
. 'ON u.product_id = r.id '
. 'WHERE c.id >= :min AND c.id < :max '
. 'ORDER BY c.id ASC, u.date DESC ';
2. 接下来我们可以根据对客户ID的限制，使用简单的$_GET参数实现一种分页形式。请注意，我们添加了一个额外的检查，以确保$prev的值不会低于零。你可以考虑添加另一个控件，确保$next的值不超过最后一个客户ID。在本例中，我们只允许它递增。
$page = $_GET['page'] ?? 1;
$page = (int) $page;
$next = $page + 1;
$prev = $page - 1;
$prev = ($prev >= 0) ? $prev : 0;
3. 然后我们计算$min和$max的值，并准备和执行SQL语句。
$min = $prev * ITEMS_PER_PAGE;
$max = $page * ITEMS_PER_PAGE;
$stmt = $conn->pdo->prepare($sql);
$stmt->execute(['min' => $min, 'max' => $max]);
4. 可以使用while()循环来获取结果。在这个例子中，我们使用PDO::FETCH_ASSOC的简单获取模式。使用客户ID作为键，我们将客户的基本信息存储为数组参数。然后我们在一个子数组中存储一个购买信息的数组，$results[$key]['purchases'][]。当客户ID发生变化时，就是一个信号，为下一个客户存储同样的信息。需要注意的是，我们将每个客户的总数累积在数组key total中。
$custId = 0;
$result = array();
$grandTotal = 0.0;
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
if ($row['id'] != $custId) {
$custId = $row['id'];
$result[$custId] = [
'name' => $row['name'],
'balance' => $row['balance'],
'email' => $row['email'],
'phone' => $row['phone'],
];
$result[$custId]['total'] = 0;
}
$result[$custId]['purchases'][] = [
'transaction' => $row['transaction'],
'date' => $row['date'],
'quantity' => $row['quantity'],
'sale_price' => $row['sale_price'],
'title' => $row['title'],
];
$result[$custId]['total'] += $row['sale_price'];
$grandTotal += $row['sale_price'];
}
?>
5. 接下来我们实现视图逻辑。首先，我们从一个显示主要客户信息的块开始。
<div class="container">
<?php foreach ($result as $key => $data) : ?>
<div class="mainLeft color0">
<?= $data['name'] ?> [<?= $key ?>]
</div>
<div class="mainRight">
<div class="row">
<div class="left">Balance</div>
<div class="right"><?= $data['balance']; ?></div>
</div>
<div class="row">
<div class="left color2">Email</div>
<div class="right"><?= $data['email']; ?></div>
</div>
<div class="row">
<div class="left">Phone</div>
<div class="right"><?= $data['phone']; ?></div>
</div>
<div class="row">
<div class="left color2">Total Purchases</div>
<div class="right">
<?= number_format($data['total'],2); ?>
</div>
</div>
6. 接下来是显示这个客户的购买清单的逻辑。
<!-- Purchases Info -->
<table>
<tr>
<th>Transaction</th><th>Date</th><th>Qty</th>
<th>Price</th><th>Product</th>
</tr>
<?php $count = 0; ?>
<?php foreach ($data['purchases'] as $purchase) : ?>
<?php $class = ($count++ & 01) ? 'color1' : 'color2'; ?>
<tr>
<td class="<?= $class ?>"><?= $purchase['transaction'] ?></td>
<td class="<?= $class ?>"><?= $purchase['date'] ?></td>
<td class="<?= $class ?>"><?= $purchase['quantity'] ?></td>
<td class="<?= $class ?>"><?= $purchase['sale_price'] ?></td>
<td class="<?= $class ?>"><?= $purchase['title'] ?></td>
</tr>
<?php endforeach; ?>
</table>
7. 为了分页的目的，我们添加按钮来代表上一个和下一个。
<?php endforeach; ?>
<div class="container">
<a href="?page=<?= $prev ?>">
<input type="button" value="Previous"></a>
<a href="?page=<?= $next ?>">
<input type="button" value="Next" class="buttonRight"></a>
</div>
<div class="clearRow"></div>
</div>
8. 遗憾的是，到目前为止，结果还远没有达到整洁的程度。因此，我们添加了一个简单的JavaScript函数来根据id属性来切换<div>标签的可见性。
<script type="text/javascript">
function showOrHide(id) {
var div = document.getElementById(id);
div.style.display = div.style.display == "none" ? "block" : "none";
}
</script>
9. 接下来，我们将Purchases表包装在最初不可见的 <div> 标签内。 然后，我们可以限制最初可见的子行数，并添加一个链接来显示剩余的购买数据。
<div class="row" id="<?= 'purchase' . $key ?>" style="display:none;">
<table>
<tr>
<th>Transaction</th><th>Date</th><th>Qty</th>
<th>Price</th><th>Product</th>
</tr>
<?php $count = 0; ?>
<?php $first = TRUE; ?>
<?php foreach ($data['purchases'] as $purchase) : ?>
<?php if ($count > SUBROWS_PER_PAGE && $first) : ?>
<?php $first = FALSE; ?>
<?php $subId = 'subrow' . $key; ?>
</table>
<a href="#" onClick="showOrHide('<?= $subId ?>')">More</a>
<div id="<?= $subId ?>" style="display:none;">
<table>
<?php endif; ?>
<?php $class = ($count++ & 01) ? 'color1' : 'color2'; ?>
<tr>
<td class="<?= $class ?>"><?= $purchase['transaction'] ?></td>
<td class="<?= $class ?>"><?= $purchase['date'] ?></td>
<td class="<?= $class ?>"><?= $purchase['quantity'] ?></td>
<td class="<?= $class ?>"><?= $purchase['sale_price'] ?></td>
<td class="<?= $class ?>"><?= $purchase['title'] ?></td>
</tr>
<?php endforeach; ?>
</table>
<?php if (!$first) : ?></div><?php endif; ?>
</div>
10. 然后我们添加一个按钮，当点击时，就会显示出隐藏的<div>标签。
<input type="button" value="Purchases" class="buttonRight"
onClick="showOrHide('<?= 'purchase' . $key ?>')">
如何运行...
将步骤1至步骤5中描述的代码放入 chap_10_html_table_multi_array_hidden.php 文件中。
在while()循环中添加以下内容。
printf('%6s : %20s : %8s : %20s' . PHP_EOL,
$row['id'], $row['name'], $row['transaction'], $row['title']);
就在 while() 循环之后，添加一条退出命令。下面是输出结果。
你会注意到，基本的客户信息，如ID和姓名，在每条结果行中都会重复，但购买信息，如交易和产品名称，则有所不同。继续删除printf()语句。
将退出命令改为：
echo '<pre>', var_dump($result), '</pre>'; exit;
下面是新组成的3D阵列的样子。
现在可以添加步骤5至7中所示的显示逻辑。如前所述，虽然你现在显示的是所有数据，但可视化显示并没有什么帮助。现在继续添加剩余步骤中提到的细化内容。下面是初始输出可能出现的情况。
当点击 "购买 "按钮时，会出现初始购买信息。如果点击 "更多 "链接，则显示剩余的购买信息。
