html - 三重分组的表格数据 - 如何显示?

标签 html user-interface html-table

我需要在网站的表格中显示一堆数据作为报告的一部分。问题是它有很多,需要在视觉上对其进行分组。

每条数据都是一个元素的“使用”,有日期(代表什么时候被使用过),店铺号(对应使用过的店铺),元素名(被使用过的元素) 和数量(已使用的元素的数量)。

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

报告需要按商品/商店(取决于分组依据选项)和按日期对数量求和,并对小项求和。

问题是,我不确定如何显示它。我现在能想到的最好的是

                           ++------+------+------+------++-----+
                           || 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/

相关文章:

css - 在整个表格中拉伸(stretch) twitter bootstrap 表格单元格以进行描述

javascript - Jquery mobile,在页面下方创建一个栏(照片)

html - div 内的背景不透明度 div

javascript - Angularjs - Angular UI 网格 : It's possible to filter dynamically dropdown options by rowentity values?

user-interface - 如何在 Qt 中保持小部件的纵横比?

javascript - 生成包含值及其兄弟值和父值的 HTML 表行

php - 以HTML表格格式显示Mysql数据

javascript - 尝试更改按钮的颜色以显示使用 javascript 显示的图像

Java Swing : adding a JTextField (never used anywhere) randomly makes the screen go white

java - 图形界面框架Java