Cuadrícula de datos de JavaScript para millones de filas [cerrado]

Necesito presentar una gran cantidad de filas de datos (es decir, millones de filas) al usuario en una cuadrícula usando JavaScript.

El usuario no debe ver páginas o ver solo cantidades finitas de datos a la vez.

Más bien, debería parecer que todos los datos están disponibles.

En lugar de descargar todos los datos de una vez, se descargan pequeños fragmentos a medida que el usuario se acerca a ellos (es decir, desplazándose por la cuadrícula).

Las filas no se editarán a través de este front-end, por lo que se aceptan cuadrículas de solo lectura.

¿Qué cuadrículas de datos, escritas en JavaScript, existen para este tipo de paginación perfecta?

( Descargo de responsabilidad: soy el autor de SlickGrid )

ACTUALIZACIÓN Esto ahora se ha implementado en SlickGrid .

Consulte http://github.com/mleibman/SlickGrid/issues#issue/22 para una discusión continua sobre cómo hacer que SlickGrid funcione con un mayor número de filas.

El problema es que SlickGrid no virtualiza la barra de desplazamiento: la altura del área desplazable se establece en la altura total de todas las filas. Las filas se siguen agregando y eliminando a medida que el usuario se desplaza, pero el navegador realiza el desplazamiento en sí. Eso permite que sea muy rápido pero suave (los eventos de desplazamiento son notoriamente lentos). La advertencia es que hay errores / límites en los motores CSS de los navegadores que limitan la altura potencial de un elemento. Para IE, eso es 0x123456 o 1193046 píxeles. Para otros navegadores es más alto.

Hay una solución experimental en la rama "arreglo de largenum" que aumenta ese límite de manera significativa al llenar el área desplazable con "páginas" establecidas en 1 M de altura de píxeles y luego usar el posicionamiento relativo dentro de esas páginas. Dado que el límite de altura en el motor CSS parece ser diferente y significativamente más bajo que en el motor de diseño real, esto nos da un límite superior mucho más alto.

Todavía estoy buscando una manera de llegar a un número ilimitado de filas sin renunciar a la ventaja de rendimiento que SlickGrid tiene actualmente sobre otras implementaciones.

Rudiger, ¿puedes explicar cómo resolviste esto?

https://github.com/mleibman/SlickGrid/wiki

" SlickGrid utiliza renderizado virtual para permitirle trabajar fácilmente con cientos de miles de elementos sin ninguna caída en el rendimiento. De hecho, no hay diferencia en el rendimiento entre trabajar con una cuadrícula con 10 filas frente a 100,000 filas " .

Algunos puntos destacados:

• Desplazamiento virtual adaptativo (maneja cientos de miles de filas)
• Velocidad de renderizado extremadamente rápida
• Fondo posterior a la representación para celdas más ricas
• Configurable y personalizable
• Teclado completo de navegación
• Cambiar el tamaño de la columna / reordenar / mostrar / ocultar
• Columna autosizing y ajuste forzado
• Formateadores y editores de células conectables
• Soporte para editar y crear nuevas filas. "por mleibman

Es gratis (licencia MIT). Utiliza jQuery.

Las mejores cuadrículas en mi opinión están a continuación:

• Flexigrid: http://flexigrid.info/
• jQuery Grid: http://www.trirand.com/blog/
• jqGridView: http://plugins.jquery.com/project/jqGridView
• jqxGrid: http://www.jqwidgets.com/
• Ingrid: http://reconstrukt.com/ingrid/
• SlickGrid http://github.com/mleibman/SlickGrid
• DataTables http://www.datatables.net/index
• ShieldUI http://demos.shieldui.com/web/grid-virtualization/performance-1mil-rows

Mis 3 mejores opciones son jqGrid, jqxGrid y DataTables. Pueden trabajar con miles de filas y admitir la virtualización.

No pretendo comenzar una guerra de llamas, pero suponiendo que sus investigadores sean humanos, no los conoce tan bien como cree. El hecho de que tengan petabytes de datos no los hace capaces de ver incluso millones de registros de ninguna manera significativa. Podrían decir que quieren ver millones de discos, pero eso es una tontería. Haga que sus investigadores más inteligentes hagan algunas matemáticas básicas: suponga que pasan 1 segundo viendo cada registro. A ese ritmo, tomará 1000000 segundos, lo que equivale a más de seis semanas (de 40 horas semanales de trabajo sin descansos para la comida o el baño).

¿Ellos (o usted) piensan seriamente que una persona (la que mira la cuadrícula) puede reunir ese tipo de concentración? ¿Realmente están haciendo mucho en ese segundo o están (más probablemente) filtrando las cosas que no quieren? Sospecho que después de ver un subconjunto de "tamaño razonable", podrían describirle un filtro que filtraría automáticamente esos registros.

Como también implicaron paxdiablo y Sleeper Smith y Lasse V Karlsen, usted (y ellos) no han pensado en los requisitos. En el lado positivo, ahora que ha encontrado SlickGrid, estoy seguro de que la necesidad de esos filtros se hizo evidente de inmediato.

Puedo decir con bastante certeza que realmente no es necesario mostrar millones de filas de datos al usuario.

No hay ningún usuario en el mundo que pueda comprender o administrar ese conjunto de datos, por lo que incluso si técnicamente logras llevarlo a cabo, no resolverás ningún problema conocido para ese usuario.

En cambio, me enfocaría en por qué el usuario quiere ver los datos. El usuario no quiere ver los datos solo para ver los datos, por lo general, se hace una pregunta. Si te enfocas en responder esas preguntas, entonces estarías mucho más cerca de algo que resuelva un problema real.

Recomiendo Ext JS Grid con la función Vista en búfer.

http://www.extjs.com/deploy/dev/examples/grid/buffer.html

(Descargo de responsabilidad: soy el autor de w2ui)

Recientemente escribí un artículo sobre cómo implementar la cuadrícula de JavaScript con 1 millón de registros ( http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records ). Descubrí que, en última instancia, hay 3 restricciones que evitan que se tome más alto:

1. La altura del div tiene un límite (se puede superar mediante desplazamiento virtual)
2. Operaciones como ordenar y buscar comienzan a ser lentas después de aproximadamente 1 millón de registros
3. RAM es limitada porque los datos se almacenan en una matriz de JavaScript

He probado la cuadrícula con 1 millón de registros (excepto IE) y funciona bien. Vea el artículo para demostraciones y ejemplos.

dojox.grid.DataGrid ofrece una abstracción JS para datos para que pueda conectarla a varios backends con las tiendas dojo.data proporcionadas o escribir la suya propia. Obviamente, necesitará uno que admita acceso aleatorio para tantos registros. DataGrid también proporciona accesibilidad completa.

Edite, así que aquí hay un enlace al artículo de Matthew Russell que debería proporcionar el ejemplo que necesita, viendo millones de registros con dojox.grid. Tenga en cuenta que usa la versión anterior de la cuadrícula, pero los conceptos son los mismos, solo hubo algunas mejoras incompatibles de API.

Ah, y es de código abierto totalmente gratuito.

Utilicé jQuery Grid Plugin , fue agradable.

Población

Aquí hay un par de optimizaciones que puede aplicar para acelerar las cosas. Solo pensando en voz alta.

Dado que el número de filas puede ser de millones, querrá un sistema de almacenamiento en caché solo para los datos JSON del servidor. No puedo imaginar a nadie que quiera descargar todos los X millones de elementos, pero si lo hicieran, sería un problema. Esta pequeña prueba en Chrome para una matriz en enteros de 20M + se bloquea constantemente en mi máquina.

var data = [];
for(var i = 0; i < 20000000; i++) {
    data.push(i);
}
console.log(data.length);​

Podría usar LRU o algún otro algoritmo de almacenamiento en caché y tener un límite superior sobre la cantidad de datos que está dispuesto a almacenar en caché.

Para las celdas de la tabla en sí, creo que construir / destruir nodos DOM puede ser costoso. En su lugar, podría predefinir X número de celdas, y cada vez que el usuario se desplace a una nueva posición, inyecte los datos JSON en estas celdas. La barra de desplazamiento prácticamente no tendría relación directa con la cantidad de espacio (altura) que se requiere para representar todo el conjunto de datos. Puede establecer arbitrariamente la altura del contenedor de la tabla, digamos 5000 px, y asignarla al número total de filas. Por ejemplo, si la altura de los contenedores es de 5000 px y hay un total de 10M filas, entonces el starting row ≈ (scroll.top/5000) * 10Mlugar scroll.toprepresenta la distancia de desplazamiento desde la parte superior del contenedor. Pequeña demostración aquí .

Para detectar cuándo solicitar más datos, idealmente un objeto debe actuar como un mediador que escucha los eventos de desplazamiento. Este objeto realiza un seguimiento de qué tan rápido se está desplazando el usuario, y cuando parece que el usuario se está desacelerando o se ha detenido por completo, realiza una solicitud de datos para las filas correspondientes. Recuperar datos de esta manera significa que sus datos estarán fragmentados, por lo que el caché debe diseñarse teniendo esto en cuenta.

También los límites del navegador en las conexiones salientes máximas pueden jugar un papel importante. Un usuario puede desplazarse a una determinada posición que disparará una solicitud AJAX, pero antes de que finalice, el usuario puede desplazarse a otra parte. Si el servidor no responde lo suficiente, las solicitudes se pondrán en cola y la aplicación no responderá. Puede usar un administrador de solicitudes a través del cual se enrutan todas las solicitudes, y puede cancelar las solicitudes pendientes para hacer espacio.

Sé que es una pregunta antigua, pero aún así ... También hay dhtmlxGrid que puede manejar millones de filas. Hay una demostración con 50,000 filas, pero el número de filas que se pueden cargar / procesar en la cuadrícula es ilimitado.

Descargo de responsabilidad: soy del equipo DHTMLX.

Te sugiero que leas esto

http://www.sitepen.com/blog/2008/11/21/effective-use-of-jsonreststore-referencing-lazy-loading-and-more/

Descargo de responsabilidad: uso mucho YUI DataTable sin dolor de cabeza durante mucho tiempo . Es poderoso y estable. Para sus necesidades, puede utilizar un ScrollingDataTable suports wich

• desplazamiento x
• desplazamiento en y
• desplazamiento xy
• Un poderoso mecanismo de eventos

Para lo que necesitas, creo que lo que quieres es un tableScrollEvent . Su API dice

Se dispara cuando un DataTable de desplazamiento fijo tiene un desplazamiento.

Como cada DataTable usa un DataSource, puede monitorear sus datos a través de tableScrollEvent junto con el tamaño del bucle de renderizado para completar su ScrollingDataTable de acuerdo con sus necesidades.

El tamaño del bucle de procesamiento dice

En los casos en que su DataTable necesita mostrar la totalidad de un conjunto de datos muy grande, la configuración de renderLoopSize puede ayudar a administrar la representación del DOM del navegador para que el hilo de la interfaz de usuario no se bloquee en tablas muy grandes . Cualquier valor mayor que 0 hará que la representación DOM se ejecute en cadenas setTimeout () que representen el número especificado de filas en cada bucle. El valor ideal debe determinarse por implementación ya que no existen reglas estrictas y rápidas, solo pautas generales:

• De forma predeterminada, renderLoopSize es 0, por lo que todas las filas se representan en un solo bucle. Un renderLoopSize> 0 agrega gastos generales, así que úsalo cuidadosamente.
• Si su conjunto de datos es lo suficientemente grande (número de filas X número de columnas X complejidad del formato) que los usuarios experimentan latencia en el renderizado visual y / o hace que el script se cuelgue, considere configurar un renderLoopSize .
• Un renderLoopSize por debajo de 50 probablemente no valga la pena. Un renderLoopSize> 100 es probablemente mejor.
• Un conjunto de datos probablemente no se considere lo suficientemente grande a menos que tenga cientos y cientos de filas.
• Tener un renderLoopSize> 0 y <total de filas hace que la tabla se represente en un bucle (igual que renderLoopSize = 0) pero también desencadena funcionalidades como el trazado de filas de post-renderizado para que se maneje desde un hilo setTimeout separado.

Por ejemplo

// Render 100 rows per loop
 var dt = new YAHOO.widget.DataTable(<WHICH_DIV_WILL_STORE_YOUR_DATATABLE>, <HOW YOUR_TABLE_IS STRUCTURED>, <WHERE_DOES_THE_DATA_COME_FROM>, {
     renderLoopSize:100
 });

<WHERE_DOES_THE_DATA_COME_FROM> es solo un único DataSource . Puede ser un JSON, JSFunction, XML e incluso un solo elemento HTML

Aquí puedes ver un tutorial simple, provisto por mí. Tenga en cuenta que ningún otro plugin DATA_TABLE admite clics simples y dobles al mismo tiempo. YUI DataTable te permite. Y más, puedes usarlo incluso con JQuery sin dolor de cabeza

Algunos ejemplos, puedes ver

• Elemento de la lista

Siéntase libre de preguntar sobre cualquier otra cosa que desee sobre YUI DataTable.

Saludos,

De alguna manera no veo el punto, para jqGrid puedes usar la funcionalidad de desplazamiento virtual:

http://www.trirand.net/aspnetmvc/grid/performancevirtualscrolling

pero, de nuevo, se pueden hacer millones de filas con filtrado:

http://www.trirand.net/aspnetmvc/grid/performancelinq

Sin embargo, realmente no veo el punto de "como si no hubiera páginas", quiero decir ... no hay forma de mostrar 1,000,000 de filas a la vez en el navegador - esto es 10MB de HTML sin procesar, no veo por qué los usuarios no querrían ver las páginas.

De todas formas...

El mejor enfoque que se me ocurre es cargar la porción de datos en formato json para cada desplazamiento o algún límite antes de que finalice el desplazamiento. json se puede convertir fácilmente en objetos y, por lo tanto, las filas de la tabla se pueden construir fácilmente de manera discreta

Recomiendo encarecidamente Open rico . Es difícil de implementar al principio, pero una vez que lo agarres, nunca mirarás hacia atrás.

Sé que esta pregunta tiene algunos años, pero jqgrid ahora admite el desplazamiento virtual:

http://www.trirand.com/blog/phpjqgrid/examples/paging/scrollbar/default.php

pero con paginación deshabilitada

Sugiero sigma grid, sigma grid ha incorporado funciones de paginación que podrían admitir millones de filas. Y también, es posible que necesite una paginación remota para hacerlo. vea la demostración http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html

Echa un vistazo a dGrid:

https://dgrid.io/

Estoy de acuerdo en que los usuarios NUNCA, NUNCA necesitarán ver millones de filas de datos a la vez, pero dGrid puede mostrarlos rápidamente (una pantalla a la vez).

No hiervas el océano para hacer una taza de té.