2012-08-06 14 views
5

Me gustaría crear una tabla/lista HTML personalizada con muchas filas. Necesito virtualización de fila, pero no estoy seguro de cuál es la mejor manera de lograr esto.¿Cómo aplicar la virtualización de filas para una tabla/lista en HTML/CSS/JS?

Por virtualización de fila Me refiero al concepto en el que las filas de la tabla/ul/div no son visibles ni se representan en absoluto, siempre que no se desplacen a la vista. Básicamente, el objetivo es eliminar el renderizado si el elemento nunca se muestra (detrás de un rollo).

¿Alguna idea? Creo que los elementos DOM deben agregarse a la lista tan pronto como "se desplacen a la vista". Y luego necesitaría tener un div invisible con la altura de la altura total de todas las filas para hacer posible el desplazamiento.

¿Hay algún ejemplo de código simple que logre esto?

Respuesta

3

No sé acerca de ejemplos de código "simple" pero he encontrado los siguientes proyectos que utilizan DOM virtualización

MegaList y SlickGrid

El ejemplo MegaList es el más fácil de entender, ya que es sólo una 'ul' que obtiene elementos de la lista agregados.

1

Infinite Scrolling debe hacerlo apuntar en la dirección correcta.

+3

Supongo que la diferencia entre esto y la verdadera virtualización es que las páginas de desplazamiento infinito no eliminan elementos del DOM cuando se desplazan fuera de la pantalla. Al usar virtualización, los elementos DOM se agregan y eliminan activamente. –

0

El Wijmo 5 FlexGrid implementa este comportamiento. Puede encontrar una comparación en línea here

Cuestiones relacionadas