三元組分列表數據 - 如何顯示？

Question

我需要在網站的表格中顯示一堆數據作爲報告的一部分。問題是它有一堆，它需要在視覺上分組。

每一條數據都是一個項目的「用法」，並且有一個日期（表示它何時被使用），一個商店編號（對應於使用它的商店），一個項目名稱使用）和數量（使用的物品數量）。

用戶可以選擇按項目分組，然後按商店或按商店分組，然後按項目分組。在幕後，我也會按日期分組。

該報表需要按項目/商店（取決於分組選項）和按日期總計數量，以及總計子數目。

事情是，我不知道如何顯示它。我可以想出現在最好的是一樣的東西

      ++------+------+------+------++-----+ 
          || 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中表現的！

更好的問題是：有沒有更好的方法？

你對解決這個問題的建議是什麼？（最好優雅和容易）

Answer 1

我認爲最好的解決辦法是按項目的數據，像下面的圖片 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?

Answer 2

這是可行的，但我不會直接在html自己做這個。首先設置它很複雜，但稍後在業務需求發生變化時進行修改會變得非常複雜。

如果您最終嘗試使用它，我建議您查看堆棧和嵌入表格，滾動div以及固定位置/重疊div的概念。即便如此，嘗試在不止一種類型的瀏覽器中實現這種複雜的工作也不會很有趣。

我建議尋找一些更高級別的工具。如果你仍然想採取一些手動方法，ASP.NET有一些很好的控制。它們具有內置的控件，可以在代碼中進行修改，或者可以編寫代碼（而不是標記）表格，並仍然利用事件模型來查詢/重新查詢數據庫。

更好的是，你可以看看像SSRS（還有很多其他）的報表工具，甚至是基本需求的MS Access。