我需要在网站的表格中显示一堆数据作为报告的一部分。问题是它有很多,需要在视觉上对其进行分组。
每条数据都是一个元素的“使用”,有日期(代表什么时候被使用过),店铺号(对应使用过的店铺),元素名(被使用过的元素) 和数量(已使用的元素的数量)。
用户可以选择按项目分组,然后按商店分组,或者按商店分组,然后按项目分组。在幕后,我也会按日期分组。
报告需要按商品/商店(取决于分组依据选项)和按日期对数量求和,并对小项求和。
问题是,我不确定如何显示它。我现在能想到的最好的是
++------+------+------+------++-----+
|| date | date | date | date || sum |
+-----------+--------------||======+======+======+======||=====+---+
| Item Name | Store Number || 1 | 2 | 3 | 4 || 10 | ^ |
| +--------------||------+------+------+------||-----|---|
| | Store Number || 5 | 6 | 7 | 8 || 26 | # |
| +--------------||------+------+------+------||-----| # |
| | Store Number || 9 | 10 | 11 | 12 || 42 | # |
| +--------------||------+------+------+------||-----| |
| Total || 15 | 18 | 21 | 24 || 78 | |
+==========================++===========================++=====| |
| Item Name | Store Number || 1 | 2 | 3 | 4 || 10 | |
| +--------------||------+------+------+------||-----| |
| | Store Number || 5 | 6 | 7 | 8 || 26 | |
| +--------------||------+------+------+------||-----| |
| | Store Number || 9 | 10 | 11 | 12 || 42 | |
| +--------------||------+------+------+------||-----|---|
| Total || 15 | 18 | 21 | 24 || 78 | v |
+==========================++===========================++=====+---+
| < | #### | > |
+---------------------------+
按商品分组后入库,或将“商品名称”与“门店编号”切换为按门店分组后入库。
日期列(不止四个)将向左/向右滚动,项目/商店将向上/向下滚动,以将表格保持在一页上。换句话说,日期标题在垂直方向卡住,项目名称、商店编号和金额在水平方向卡住。
问题在于实现:我到底怎么用 HTML 表示它!?
更好的问题是:有没有更好的方法?
你对解决这个问题有什么建议?(最好优雅而轻松)
最佳答案
我认为最好的解决方案是按项目对数据进行分组,如下图 http://img51.imageshack.us/img51/6434/layoutsv.png
HTML 将类似于以下内容:
<div style="overflow: auto; width: 100%; height: 500px">
<h1>Item 1</h1>
<table>
<tr>
<th></th>
<th>Date</th>
...
...
</tr>
<tr>
<th>Store #</th>
<td>1</td>
...
...
</tr>
...
...
</table>
<h1>Item 2</h1>
...
...
</div>
对于固定列,您应该查看此处: HTML table with fixed headers and a fixed column?
关于html - 三重分组的表格数据 - 如何显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3336136/