Manera elegante de ver datos jerárquicos en una aplicación web

Question

Este es un problema bastante frustrante que he tenido que resolver en múltiples ocasiones, y nunca encontré la solución que se me ocurrió totalmente satisfactoria.

Digamos que tiene una estructura de datos jerárquica 'compleja' que debe presentar al usuario de su aplicación web, y la mayoría de los nodos en la jerarquía también deben poder editarse. Por ejemplo, supongamos que debe presentar los detalles del Proyecto, donde cada Proyecto puede tener múltiples Tareas asociadas a ellos. Ahora un usuario puede querer editar un Proyecto (por ejemplo, cambiar su nombre) o agregarle una Tarea en particular, editar una tarea o eliminar una, etc.

La manera en que generalmente hago esto es tener una tabla de Proyectos y una Forma del proyecto Cuando un usuario hace clic en una fila en la tabla de proyectos, el formulario se rellena para reflejar los detalles del Proyecto, y se llena otra tabla que contiene las tareas para ese Proyecto en particular. Sin embargo, este enfoque parece bastante torpe cuando tienes muchos niveles en tu jerarquía, y nunca sé si ocultar datos hasta que se soliciten y deslizarlos a la vista o mostrar marcadores de posición vacíos, etc., probablemente entiendas el punto.

Así que mi pregunta es: ¿conoce algún ejemplo en el que este problema se haya resuelto de manera elegante? ¿Hay algún consenso sobre qué es lo mejor desde una perspectiva de diseño/mejores prácticas de UI? (He mantenido intencionalmente este lenguaje/plataforma agnóstico).

Todas las sugerencias son apreciadas.

Answer 1

Coincidentemente, actualmente estoy trabajando con el mismo tipo de proyecto.
El problema no tiene una solución "universal". Todo depende del contexto.

• Cómo se supone que se muestran los datos.
• ¿Cómo está viendo el usuario los datos?
• Cómo interactúa el usuario con los datos.

Hay muchas preguntas y cada contexto tiene sus propias respuestas.
Cada usuario puede incluso tener diferentes respuestas en el mismo contexto, pero desarrollar algo como esto para satisfacer a cada usuario es imposible. Uno tiene que hacer concesiones.

Bueno ... Eso es mi dos centavos de todos modos.

Answer 2

Bueno, para un ejemplo de JavaScript de formularios anidados (con un montón de opciones de edición y visualización), está the jqGrid Demos. Consulte debajo de Ejemplos -> Avanzado -> Subgrid para ver un ejemplo.

Pero sí, no hay una sola manera verdadera de resolver esta, pero cuando se me ocurra, se lo haré saber. :)