una tablas tabla script que llenar ejemplos dinamicas definicion datos con agregar javascript jquery html5 datagrid slickgrid

tablas - Cuadrícula de datos de JavaScript para millones de filas



llenar tabla html con jquery (19)

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 los datos de una vez, se descargan pequeños trozos a medida que el usuario llega a ellos (es decir, desplazándose por la cuadrícula).

Las filas no se editarán a través de este extremo frontal, por lo que las cuadrículas de solo lectura son aceptables.

¿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 en sí: la altura del área desplazable se establece en la altura total de todas las filas. Las filas aún se están agregando y eliminando a medida que el usuario se desplaza, pero el desplazamiento se realiza mediante el navegador. Eso permite que sea muy rápido y, sin embargo, suave (los eventos de onscroll 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 pasa a ser 0x123456 o 1193046 píxeles. Para otros navegadores es más alto.

Existe una solución experimental en la rama "largenum-fix" que aumenta ese límite significativamente al poblar el área desplazable con "páginas" configuradas a 1M de altura de píxeles y luego usar la posición relativa 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?

(Descargo de responsabilidad: soy el autor de w2ui)

Recientemente he escrito 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 impiden que sea más alto:

  1. La altura del div tiene un límite (se puede superar mediante desplazamiento virtual)
  2. Las operaciones como la ordenación y la búsqueda comienzan a ser lentas después de 1 millón de registros o menos
  3. La memoria RAM es limitada porque los datos se almacenan en la matriz de JavaScript

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

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

Dado que la cantidad de filas puede ser de millones, deseará 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 de más de 20M + enteros falla 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, simplemente puede 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) necesaria para representar el conjunto de datos completo. Podría establecer arbitrariamente la altura del contenedor de la tabla, digamos 5000px, y asignarla al número total de filas. Por ejemplo, si la altura de los contenedores es 5000px y hay un total de 10M filas, entonces la starting row ≈ (scroll.top/5000) * 10M donde scroll.top representa la distancia de desplazamiento desde la parte superior del contenedor. Pequeña demostración aquí .

Para detectar cuándo solicitar más datos, lo ideal es que un objeto actúe como un mediador que escucha los eventos de desplazamiento. Este objeto realiza un seguimiento de la rapidez con que el usuario se desplaza, y cuando parece que el usuario se está ralentizando o se ha detenido por completo, realiza una solicitud de datos para las filas correspondientes. La recuperación de datos de esta manera significa que sus datos se van a fragmentar, por lo que la memoria caché debe diseñarse con eso en mente.

También los límites del navegador en las conexiones salientes máximas pueden desempeñar un papel importante. Un usuario puede desplazarse a una determinada posición que activará una solicitud AJAX, pero antes de que termine, 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á. Podría usar un administrador de solicitudes a través del cual se enrutan todas las solicitudes, y puede cancelar las solicitudes pendientes para hacer espacio.

Descargo de responsabilidad: uso mucho YUI DataTable sin ningún dolor de cabeza durante mucho tiempo . Es potente y estable. Para sus necesidades, puede usar una ScrollingDataTable que soporta

  • desplazamiento x
  • desplazamiento de y
  • desplazamiento xy
  • Un poderoso mecanismo de evento.

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

Se activa 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 procesamiento para llenar su ScrollingDataTable de acuerdo con sus necesidades.

Tamaño de bucle de renderizado

En los casos en que su DataTable necesita mostrar la totalidad de un conjunto muy grande de datos, la configuración de renderLoopSize puede ayudar a administrar la representación del DOM del navegador para que el subproceso de la interfaz de usuario no se bloquee en tablas muy grandes . Cualquier valor mayor que 0 hará que la representación de 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 hay reglas estrictas y rápidas, solo pautas generales:

  • Por defecto, el valor de renderLoopSize es 0, por lo que todas las filas se representan en un solo bucle. Un renderLoopSize> 0 agrega sobrecarga, así que utilícelo cuidadosamente.
  • Si su conjunto de datos es lo suficientemente grande (número de filas X número de complejidad de formato de Columnas X) los usuarios experimentan latencia en la representación visual y / o hacen que el script se bloquee , considere la posibilidad de establecer un renderLoopSize .
  • Un renderLoopSize under 50 probablemente no valga la pena. Un renderLoopSize> 100 es probablemente mejor.
  • Un conjunto de datos probablemente no se considera lo suficientemente grande a menos que tenga cientos y cientos de filas.
  • Tener un renderLoopSize> 0 y <el total de filas hace que la tabla se represente en un bucle (igual que renderLoopSize = 0) pero también activa la funcionalidad, como la división de filas posterior al procesamiento, que se maneja 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 una única DataSource . Puede ser un JSON, JSFunction, XML e incluso un solo elemento HTML

Here puedes ver un tutorial simple, proporcionado por mí. Tenga en cuenta que ningún otro plugin DATA_TABLE es compatible con un solo y doble clic al mismo tiempo. YUI DataTable te permite. Y más, puedes usarlo incluso con JQuery sin dolor de cabeza

Algunos ejemplos, puedes ver

No dude en preguntar sobre cualquier otra cosa que desee sobre YUI DataTable.

Saludos,

Echa un vistazo a dGrid:

http://dojofoundation.org/packages/dgrid/

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

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

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

Las mejores cuadrículas en mi opinión son las siguientes:

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

No logro ver 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 logro ver el punto de "como si no hubiera páginas", quiero decir ... no hay manera de mostrar 1,000,000 de filas a la vez en el navegador. Esto es 10MB de HTML en bruto, no lo veo. Por qué los usuarios no querrían ver las páginas.

De todas formas...

No pretendo iniciar una guerra de fuego, pero asumiendo que sus investigadores son humanos, no los conocen tan bien como creen. El hecho de que tengan petabytes de datos no los hace capaces de ver incluso millones de registros de manera significativa. Podrían decir que quieren ver millones de registros, pero eso es una tontería. Haga que sus investigadores más inteligentes hagan algunos cálculos básicos: 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 a semanas de trabajo sin descansos para comida o lavabos).

¿Ellos (o usted) piensan seriamente que una persona (la que mira la cuadrícula) puede reunir ese tipo de concentración? ¿Realmente se están haciendo mucho en ese primer 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 paxdiablo y Sleeper Smith y Lasse V Karlsen también implicaron, usted (y ellos) no han pensado en los requisitos. En el lado positivo, ahora que has encontrado SlickGrid, estoy seguro de que la necesidad de esos filtros se hizo evidente de inmediato.

Puedo decir con bastante certeza que no necesita mostrar al usuario millones de filas de datos.

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

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

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

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

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 utiliza la versión anterior de la cuadrícula, pero los conceptos son los mismos, hubo solo algunas mejoras de API incompatibles.

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

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

" SlickGrid utiliza la representación virtual para permitirte 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 en lugar de 100 000 filas " .

Algunos puntos destacados:

  • Desplazamiento virtual adaptativo (maneja cientos de miles de filas)
  • Velocidad de renderización extremadamente rápida
  • Fondo post-rendering para celdas más ricas
  • Configurable y personalizable
  • Teclado completo de navegación
  • Cambiar el tamaño de la columna / reordenar / mostrar / ocultar
  • Ajuste automático de la columna 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.