widget de Javascript inspirado en iPhone UITableView?

La UITableView de Cocoa Touch permite al usuario desplazarse a través de grandes cantidades de filas de datos con un buen rendimiento porque recicla las filas de la tabla. En lugar de crear un elemento GUI para cada fila de datos, se crea un número limitado de filas de tablas, y simplemente se actualiza con los datos relevantes a medida que el usuario se desplaza, dando la ilusión de navegar arriba y abajo una gran cantidad de filas de tablas.widget de Javascript inspirado en iPhone UITableView?

¿Alguien ha visto esto hecho en javascript? ¿Hay un complemento disponible en cualquier lugar que haga esto por mí?

Fuente

2010-07-15 morgancodes

respuesta de Elliot debe ser la respuesta a esta pregunta. –

En realidad, el algoritmo no es difícil en absoluto. Si conoce javascript, debería poder escribir esto. El algoritmo solo necesita la altura de una celda y la altura de la tabla.

Solo conozco estos dos: Apple's Dashcode javascript Framework tiene una implementación de una tabla. Podrías echar un vistazo y ver si eso es lo que necesitas. O Marco de Cappuccino que es básicamente Objective-J pero detrás de escena es Javascript.

Fuente

2010-07-15 18:20:06 nacho4d

Sí, los conceptos básicos son simples. También me gustaría el soporte de la rueda de desplazamiento, no sé cuánto trabajo va a ser. Y tendré que manejar la animación de las células a medida que pasan dentro y fuera de la vista, lo que, aunque no es difícil, me llevará al menos unas horas. – morgancodes

No creo que esto sea necesario en JS.

Se hace de esta manera en Obj-C para no asignar e iniciar las vistas en las filas de la tabla.

En JS, las filas son solo texto (no se necesita asignación) que debe mantener en algún lugar de todos modos; puede contener solo el texto sin el HTML y envolverlo con HTML cuando la fila se vuelve visible, pero no lo creo vale tu tiempo

No creo que este enfoque hará que la tabla HTML más rápido ...

Fuente

2010-07-15 22:53:12

Michael, estaré trabajando con potencialmente miles de filas. Para el navegador, consume mucho tiempo crear todos esos objetos dom, por lo que estoy buscando formas de optimizar y reutilizar los objetos dom. – morgancodes

Ok. ¿Y el usuario será lo suficientemente paciente como para desplazarse miles de filas? Por lo general, hay una búsqueda o búsqueda en los sitios web para reducir la cantidad de datos mostrados y aumentar la usabilidad del sitio. Bueno, supongo que ya has hecho tu investigación y suposiciones sobre todas estas preguntas. Por cierto, ¿estás a punto de traer las nuevas filas con AJAX? –

Sí, las nuevas filas se traerán a través de ajax. Y, absolutamente, también hay una búsqueda. Buen punto acerca de la paciencia del usuario, aunque creo que ese punto se aplica a la paginación a través de miles de resultados tan bien como el desplazamiento. – morgancodes

infinity.js funciona bien. Cargará dinámicamente 'páginas' detrás de las escenas, lo que le da la apariencia de que la lista se ha cargado por completo.

Más información se puede encontrar en su página de Github - https://github.com/airbnb/infinity

Además, he bifurcado actualizar el proyecto para que funcione con Zepto. También lo configuré para usar cualquier div desplazable (configurado con overflow: scoll) con la clase 'scrollable' - https://github.com/elliotcw/infinity

Debo añadir que realicé estos cambios, ya que es ideal para listas grandes en dispositivos móviles, que reducir la velocidad cuando tiene que muchos elementos complejos en la página.

Fuente

2012-08-24 10:54:26 elliotcw

Estaba buscando esto también, e infinityjs [1] no parece imitar la misma interfaz que UITableView. Y fue un problema para mi escenario que infinityjs requiriera que el elemento que contiene los elementos de la lista ya se haya agregado al DOM.

MegaList [2] estuvo más cerca de lo que quería. Andrew (autor) hizo un gran trabajo al diseñarlo para dispositivos móviles primero, con soporte táctil, etc. Una advertencia para mí fue que parece asumir un modelo estricto de lista de selección y hace un poco más de lo que me gustaría con un componente de lista. hacer (por ejemplo, vincular para cambiar el tamaño de los eventos e intentar manejarlos automáticamente).

Así que comencé a escribir un componente de lista barebones, también modelado según el UITableView de iOS. Es un trabajo en progreso y estoy poniendo justo lo que necesito. Las fuentes están aquí https://github.com/shyam-habarakada/js-virtual-list-view.Estoy poniendo en justo lo que necesito como voy, y se necesitan colaboradores :-)

[1] http://airbnb.github.io/infinity/

[3] https://github.com/triceam/MegaList

Fuente

2013-07-01 15:38:53

Clusterize.js hace exactamente eso.

Es pequeño y funciona con cualquier etiqueta (tabla, listas, divs)

Fuente

2016-03-17 14:46:54 Denis

widget de Javascript inspirado en iPhone UITableView?

Respuesta

Cuestiones relacionadas