0
286
Vistas¿Cómo calcular filas y colspans dinámicamente?
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:
- Recorrer la matriz recursivamente
- Calcule el colspan (ancho) así
- si no hay hijos =>
1 - si hay hijos => suma de colspans de todos los hijos de la siguiente profundidad
- si no hay hijos =>
- Calcular el ancho de fila (altura)
- si no hay niños => profundidad máxima de todo el árbol - profundidad actual
- si hay hijos =>
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.currentDepthpero ahora tengo que atravesar la estructura dos veces. ¿Hay alguna forma de optimizar mi solución?
1 Respuestas
Responde la pregunta0
Creo que no hay una forma razonable de hacer lo que quieres con una sola iteración. Una de las premisas de lo que intenta lograr es que las celdas deben abarcar las filas hasta la profundidad del árbol. Entonces, ese es el conocimiento que debe existir como requisito previo al atravesar la matriz para transformarla en la forma finalHeaders .
A medida que envejezco, descubro que prefiero optimizar la claridad del código en lugar de algún problema de ejecución. Obviamente, no estoy ignorando la eficiencia como una preocupación, pero incluso los teléfonos son demasiado rápidos para recorrer pequeños conjuntos de datos. Pero tengo que vivir y mantener el código. Me maldeciré en 6 meses si escribo un código obtuso que es "eficiente" y tengo que pasar 45 minutos tratando de recordar cómo funciona.
Además, su objetivo de atravesar la estructura solo una vez ya es imposible. Para determinar colspan , está utilizando reduce , que a su vez itera sobre todos los elementos secundarios. Además, cualquier código de visualización estará iterando sobre los datos. Así que ya hay mucha iteración en marcha. Desaconsejaría tratar de encontrar una forma inteligente de lograr esto en una sola iteración a costa de la claridad del código.
El siguiente es un ejemplo de trabajo. Es esencialmente lo que ha descrito en su pregunta con quizás algunos pequeños ajustes por mí, pero sin cambios sustanciales en la lógica:
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 maximumDepth = getMaximumDepth(configuredHeaders); const finalHeaders = []; traverseColumnHeaders(configuredHeaders); function traverseColumnHeaders(headers, depth = 0) { headers.forEach(header => { header.depth = depth; if (header.children) { traverseColumnHeaders(header.children, depth + 1); header.colspan = header.children.reduce((currentSum, child) => currentSum + child.colspan, 0); // sum of child colspans header.rowspan = 1; } else { header.colspan = 1; header.rowspan = maximumDepth - depth; } addHeaderToFinalHeaders(header); }); } function addHeaderToFinalHeaders({depth, title, rowspan, colspan}) { if (!finalHeaders[depth]) finalHeaders[depth] = []; finalHeaders[depth].push({title, rowspan, colspan}); } function getMaximumDepth(headers) { return getDepth(headers) - 1; function getDepth(headers) { return 1 + Math.max(0, ...headers.map(({children = []}) => getDepth(children))); } } //console.log(finalHeaders); document.body.insertAdjacentHTML('beforeend', table(finalHeaders)); function table(headers) { return ` <table> <thead> ${headers.map(header => ` <tr>${header.map(cell => `<th colspan="${cell.colspan}" rowspan="${cell.rowspan}">${cell.title}</th>`).join('')}</tr> `).join('')} </thead> </table>`; } table, th { border: 1px solid black; }