jquery - stacktable - tablas en html5 y css3

Enfoques para tener una cuadrícula web asp.net responsiva para la interfaz de usuario móvil(usando visualización en bloque versus ocultando algunas columnas)

Question

Estoy trabajando en una aplicación web asp.net mvc-4 y estoy usando bootstrap 2.0. Actualmente estoy usando mucho la red web asp.net mvc, en casi todos los controladores. Ahora es una gran manera de ordenar, buscar y ver información con un código mínimo escrito. Pero el único problema al que me enfrento es cuando los usuarios acceden a la red web en dispositivos móviles. Donde las columnas de la cuadrícula web serán muy delgadas y sus datos serán casi imposibles de leer.

Ahora encuentro dos enfoques a seguir para mejorar la interfaz webgrid en dispositivos móviles:

1. Un enfoque para usar Style: "teléfono oculto" en la columna menos importante de la siguiente manera, por lo que estas columnas estarán ocultas en los dispositivos móviles, mientras que la columna más importante se mostrará y ocupará el área liberada: -

   var gridcolumns = new List<WebGridColumn>();
   
   gridcolumns.Add(new WebGridColumn()
   {
       ColumnName = "OrderID",
       Header = "",
       Style = "hidden-phone",
       CanSort = false,

2. Mientras que el segundo enfoque es usar algunos estilos de CSS para cambiar el estilo del cuento para que sea un bloque en lugar de una fila siguiendo este enlace de aproximación

Ahora, desde mi propia experiencia, el primer enfoque es más fácil de usar, ya que el usuario puede ver la tabla web como tabla, con las columnas más importantes. Mientras que el segundo enfoque tiene la ventaja de que se presentará toda la información (nada va a estar oculto), pero que las filas de la tabla de una cuadrícula web se muestren como un bloque permitirá a los usuarios ver un máximo de dos bloques sin tener que desplazarse hacia abajo / arriba.

Entonces, en términos generales, ¿qué enfoque es mejor seguir? para ocultar algunas columnas y obtener una mejor experiencia de usuario, o para ver toda la información como un bloque pero tener menos experiencia de usuario?

Answer 1

También puede usar la forma de cargar las tablas de desplazamiento horizontal de bootstrap en dispositivos pequeños.

 <div class="table-responsive">
      <table class="table"> 
            ...
      </table>
 </div>

Tuve un desafío similar y terminé con una combinación de ocultar algunas columnas, tener columnas visible-xs con valores apilados en ellas y agregar el deslizamiento con "table-responsive" .

Answer 2

No hay una solución única para todos. Por lo general, desea prefiltrar datos para un usuario móvil (y tal vez mostrarlos como una lista), de modo que el usuario tenga muy pocas filas / columnas para ver. Intentar mostrar cien filas por 15 columnas en un teléfono diminuto es un problema de diseño de la aplicación que no puede remediarse reorganizando las filas en bloques.

Supongo que si hace esta pregunta, su cuadrícula de datos particular se adapta un poco / casi a un dispositivo de usuario típico. En tal situación, si la cuadrícula es realmente necesaria, trataría de tomar el primer acercamiento y, además, pedirle al usuario que gire el teléfono a la orientación horizontal para obtener mejores resultados. Ver aquí - Detectar la orientación de la ventana gráfica, si la orientación es el mensaje de alerta de pantalla vertical que informa al usuario de las instrucciones