代码之家 › 专栏 › 技术社区 › Austin Hyde

按表格数据三次分组-如何显示?

html-table user-interface html

7

Austin Hyde · 技术社区 · 15 年前

每个数据段都是一个项目的“用法”,并且有一个日期(表示使用它的时间)、一个商店编号(对应于使用它的商店)、一个项目名称(使用过的项目)和一个数量(使用过的项目的数量)。

用户可以选择按项目分组,然后按存储或按存储,然后按项目分组。在幕后,我也会按日期分组。

报表需要按项目/存储(取决于“分组方式”选项)和按日期对数量进行求和,并合计子总和。

问题是,我不知道如何显示它。我现在能想到的最好办法就是

                           ++------+------+------+------++-----+
                           || 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来表示呢!?

更好的问题是:有更好的方法吗?

(最好优雅轻松)

2 回复 | 直到 10 年前

1

Community Mohan Dere 8 年前

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?

2

1

dave 15 年前

这是可行的,但我不会直接用html来做这件事。尽管最初设置它会很复杂,但当业务需要更改时,修改它也会很复杂。

如果你最终尝试了,我建议你研究一下堆叠和嵌入表、滚动div和固定位置/重叠div的概念。即便如此,尝试让这么复杂的东西在不止一种类型的浏览器中工作也不会有意思。

我建议您研究一些更高级的工具。如果您仍然希望采用某种手动方法,ASP.NET对此有一些很好的控件。它们具有内置控件,可以在代码中修改,也可以对表进行编码(而不是标记),并且仍然可以利用事件模型来查询/重新查询数据库。

更好的是,您可以查看一个报告工具,如SSRS(还有许多其他工具),甚至MS-Access,以满足基本需求。