2010-07-26 9 views
7

Necesito mostrar un montón de datos en una tabla en un sitio web como parte de un informe. El problema es que hay muchos, y debe ser agrupado visualmente.Triply agrupado-por datos tabulares-¿cómo mostrar?

Cada dato es un "uso" de un artículo, y tiene una fecha (que representa cuándo se usó), un número de tienda (correspondiente a la tienda que lo usó), un nombre de artículo (el artículo que usado), y una cantidad (la cantidad del artículo que se usó).

El usuario tendrá la opción de agrupar por artículo, luego almacenar o almacenar, luego artículo. Detrás de escena, voy a agrupar por fecha también.

El informe necesita sumar cantidades tanto por artículo/tienda (según la opción de agrupar-por) como por fecha, y sumar las sumas totales.

El problema es que no estoy seguro de cómo mostrarlo. Lo mejor que puedo llegar a este momento es algo así como

      ++------+------+------+------++-----+ 
          || 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 | 
+==========================++===========================++=====+---+ 
          | < | ####    | > | 
          +---------------------------+ 

Para agrupar por artículo entonces tienda, o el interruptor de "Nombre del artículo" con "Guardar número" para el grupo por la tienda a continuación artículo.

Las columnas de fecha (muchas más de cuatro) se desplazarían hacia la izquierda/derecha y los elementos/tiendas se desplazarían hacia arriba/abajo, para mantener la tabla en una página. En otras palabras, los encabezados de fecha se congelan verticalmente, y el nombre del elemento, los números de tienda y las sumas se congelan horizontalmente.

El problema sería con la implementación: ¿cómo diablos representarlo en HTML?

La mejor pregunta es: ¿hay una manera mejor?

¿Cuál es su consejo para resolver este problema? (Preferentemente elegante y fácilmente)

Respuesta

1

creo que la mejor solución es agrupar los datos por punto, de la siguiente imagen http://img51.imageshack.us/img51/6434/layoutsv.png

El HTML sería algo así como el folowing:

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

Para la columna fija que debe buscar aquí: HTML table with fixed headers and a fixed column?

+0

Eso es algo en lo que no pensé. Tengo una tendencia a hacer las cosas demasiado complicadas: D. Por cierto, bienvenido a StackOverflow! –

+0

@Austin ¡Gracias! Buena suerte con la aplicación! :) – cesarnicola

1

Es factible, pero yo no estaría haciendo esto directamente en html. Por complejo que sea configurarlo en primer lugar, será complicado modificarlo más tarde cuando la empresa necesite cambios.

Si terminas intentándolo, te recomendaría buscar conceptos de tablas apiladas e incrustadas, divs desplazables y divisiones de posición fija/superpuestas. Aun así, no será divertido intentar que algo tan complejo funcione en más de un tipo de navegador.

Recomiendo examinar algunas herramientas de nivel superior. ASP.NET tiene algunos buenos controles para esto si todavía quiere tomar un enfoque un tanto manual. Tienen controles incorporados, que se pueden modificar en código, o puede codificar (en lugar de marcar) tablas, y aún así aprovechar el modelo de eventos para consultar/volver a consultar la base de datos.

Mejor aún, podría consultar una herramienta de informes como SSRS (y hay muchos otros), o incluso MS Access para las necesidades básicas.

+0

Gracias por los consejos. Realmente, esto está dirigido a una audiencia MUY pequeña (menos de 5), con navegadores compatibles con estándares (¡aleluya!). Desafortunadamente, estoy usando PHP como backend, por lo que ASP está fuera y SQLite, por lo que SSRS/Access está fuera. No importa cómo vaya, definitivamente generaré la tabla dinámicamente de una forma u otra, ya sea JavaScript o PHP. En el lado positivo, los controles ASP son solo fragmentos prefabricados de HTML, así que si pueden hacerlo, puedo hacerlo ... –

Cuestiones relacionadas