Estoy usando un componente de tabla de un marco de interfaz de usuario que me genera los siguientes encabezados
en base a esta configuración
(resultado final)
[ [ { "title": "Section 1", "rowspan": "4", "colspan": "1" }, { "title": "Section 2", "rowspan": "1", "colspan": "2" }, { "title": "Section 3", "rowspan": "1", "colspan": "3" }, { "title": "Section 4", "rowspan": "1", "colspan": "1" } ], [ { "title": "Section 2.1", "rowspan": "3", "colspan": "1" }, { "title": "Section 2.2", "rowspan": "3", "colspan": "1" }, { "title": "Section 3.1", "rowspan": "3", "colspan": "1" }, { "title": "Section 3.2", "rowspan": "1", "colspan": "2" }, { "title": "Section 4.1", "rowspan": "1", "colspan": "1" } ], [ { "title": "Section 3.2.1", "rowspan": "2", "colspan": "1" }, { "title": "Section 3.2.2", "rowspan": "2", "colspan": "1" }, { "title": "Section 4.1.1", "rowspan": "1", "colspan": "1" } ], [ { "title": "Section 4.1.1.1", "rowspan": "1", "colspan": "1" } ] ]
Quiero simplificar la configuración. Debería haber solo una estructura similar a un árbol y quiero calcular las filas y los colspans dinámicamente
(punto de partida)
[ { "title": "Section 1" }, { "title": "Section 2", "children": [ { "title": "Section 2.1" }, { "title": "Section 2.2" } ] }, { "title": "Section 3", "children": [ { "title": "Section 3.1" }, { "title": "Section 3.2", "children": [ { "title": "Section 3.2.1" }, { "title": "Section 3.2.2" } ] } ] }, { "title": "Section 4", "children": [ { "title": "Section 4.1", "children": [ { "title": "Section 4.1.1", "children": [ { "title": "Section 4.1.1.1" } ] } ] } ] } ]
Pensé en cómo asignar la matriz de puntos de partida a la matriz de resultados final. Estas son mis suposiciones:
1
1
Mi enfoque actual
const configuredHeaders = [{ title: "Section 1" }, { title: "Section 2", children: [{ title: "Section 2.1" }, { title: "Section 2.2" } ] }, { title: "Section 3", children: [{ title: "Section 3.1" }, { title: "Section 3.2", children: [{ title: "Section 3.2.1" }, { title: "Section 3.2.2" } ] } ] }, { title: "Section 4", children: [{ title: "Section 4.1", children: [{ title: "Section 4.1.1", children: [{ title: "Section 4.1.1.1" }] }] }] }]; const finalHeaders = []; traverseColumnHeaders(configuredHeaders, -1); // first depth should start with 0 function traverseColumnHeaders(headers, parentDepth) { headers.forEach(header => { header.currentDepth = parentDepth + 1; if (header.children) { traverseColumnHeaders(header.children, header.currentDepth); header.colspan = header.children.reduce((currentSum, child) => currentSum + child.colspan, 0); // sum of child colspans header.rowspan = 1; } else { header.colspan = 1; // header.rowspan = ... maximum depth - header.currentDepth ... } addHeaderToFinalHeaders(header); }); } function addHeaderToFinalHeaders({ currentDepth, title, rowspan, colspan }) { const depthExistsInFinalHeaders = currentDepth in finalHeaders; if (!depthExistsInFinalHeaders) { finalHeaders[currentDepth] = []; } finalHeaders[currentDepth].push({ title, rowspan, colspan }); } console.log(finalHeaders);
Este se ve bastante bien para mí porque solo necesito recorrer la colección una vez. Pero como puede ver, algunos campos de rowspan
de filas aún no se calculan porque no conozco la profundidad máxima en este momento.
Para resolver esto, podría inicializar una variable global, buscar la profundidad máxima así
(Tomé la solución de aquí Obtener la profundidad de una estructura de datos de árbol de una manera más simple por ahora)
function getMaximumDepth(headers) { return getDepth(headers) -1; }; function getDepth(headers) { return 1 + Math.max(0, ...headers.map(({ children = [] }) => getDepth(children))); } const maximumDepth = getMaximumDepth(configuredHeaders);
y calcular
header.rowspan = maximumDepth - header.currentDepth
pero ahora tengo que atravesar la estructura dos veces. ¿Hay alguna forma de optimizar mi solución?