如何计算代表HTML表格的树状结构的行合并？

huangapple
go评论107阅读模式
英文:

How to calculate rowspans for a treelike structure representing a HTML table?

问题

I don't see any specific code in the provided text that needs to be translated. It seems you are asking for assistance with a programming problem related to calculating rowspans for an HTML table based on a treelike structure. If you have any questions or need help with the code or algorithm, please feel free to ask in English, and I'll be happy to assist you.

英文:

Given the following example HTML table representing a 2D matrix of nodes with rowspans and colspans

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. th, td { border: 1px solid black }

<!-- language: lang-html -->

  1. &lt;table&gt;
  2.   &lt;thead&gt;
  3.     &lt;tr&gt;
  4.       &lt;th colspan=&quot;3&quot;&gt;Major 1&lt;/th&gt;
  5.       &lt;th rowspan=&quot;3&quot;&gt;col4&lt;/th&gt;
  6.     &lt;/tr&gt;
  7.     &lt;tr&gt;
  8.       &lt;th colspan=&quot;2&quot;&gt;Sub 1&lt;/th&gt;
  9.       &lt;th rowspan=&quot;2&quot;&gt;col3&lt;/th&gt;
  10.     &lt;/tr&gt;
  11.     &lt;tr&gt;
  12.       &lt;th&gt;col1&lt;/th&gt;
  13.       &lt;th&gt;col2&lt;/th&gt;
  14.     &lt;/tr&gt;
  15.   &lt;/thead&gt;
  16. &lt;/table&gt;

<!-- end snippet -->

As you can see in the example there are some filler rowspans, e.g. for "col4". It needs to fill the remaining height

This 2D matrix is dynamic, I need to calculate it based on a treelike structure coming from a configuration. The initial treelike structure for the example above would be

  1. const columns = [{
  2.   title: &quot;Major1&quot;,
  3.   children: [{
  4.     title: &quot;Sub1&quot;,
  5.     children: [{
  6.       title: &quot;col1&quot;
  7.     }, {
  8.       title: &quot;col2&quot;
  9.     }]
  10.   }, {
  11.     title: &quot;col3&quot;
  12.   }]
  13. }, {
  14.   title: &quot;col4&quot;
  15. }];

In the first place I want to traverse this structure and calculate the colspans and rowspans for each node. For the colspan I thought the formula is

> colspan = sum of child colspans

but I couldn't figure out a formula for the rowspan yet. I started implementing the algorithm for colspans

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const columns = [{
  2.   title: &quot;Major1&quot;,
  3.   children: [{
  4.     title: &quot;Sub1&quot;,
  5.     children: [{
  6.       title: &quot;col1&quot;
  7.     }, {
  8.       title: &quot;col2&quot;
  9.     }]
  10.   }, {
  11.     title: &quot;col3&quot;
  12.   }]
  13. }, {
  14.   title: &quot;col4&quot;
  15. }];
  17. function traverse(currentColumns) {
  18.   for (const currentColumn of currentColumns) {
  19.     currentColumn.colspan = 1;
  20.     currentColumn.rowspan = 1;
  22.     if (currentColumn.children) {
  23.       traverse(currentColumn.children);
  25.       currentColumn.colspan = currentColumn.children.reduce((totalColspan, childColumn) =&gt; totalColspan + childColumn.colspan, 0);
  26.     }
  27.   }
  28. }
  30. traverse(columns)
  32. console.log(columns);

<!-- end snippet -->

but don't know how to calculate the rowspans. Do you know the formula for rowspans?

答案1

得分: 1

以下是您要翻译的部分：

  • 遍历节点并计算节点的深度 level，以及达到的最大级别 maxLevel。

  • 在遍历过程中，将所有没有子节点的项目收集到一个 items 数组中。这些项目的 rowSpan 可能不等于 1。如果不收集这些项目，性能会受到影响，因为我们需要第二次遍历节点来计算 rowSpan，所以这就像是一种缓存优化。

  • 循环遍历 items 并计算 rowSpan，计算方法为 maxLevel 减去节点的 level 再加 1。

希望这对您有所帮助。如果您有任何其他翻译需求，请告诉我。

英文:

  • Traverse the nodes and calc a node's deepness level, and a maximum level reached maxLevel.

  • While traversing collect all items without children into an items array. These items can have rowSpan different from 1. If you don't collect the items we have a performance hit because we need to traverse the nodes the second time to calculate rowSpan, so it's like a cache optimization.

  • Loop through the items and calculate rowSpan as maxLevel minus a node's level plus 1.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let maxLevel = 0;
  2. const items = [];
  4. traverse(columns);
  6. items.forEach(item =&gt; item.rowSpan = 1 + maxLevel - item.level);
  8. console.log(columns);
  10. function traverse(arr, level = 0){
  11.   for(const item of arr){
  12.     item.colSpan = 1;
  13.     item.level = level;
  14.     maxLevel &lt; level &amp;&amp; (maxLevel = level);
  15.     if(item.children){
  16.       item.rowSpan = 1;
  17.       traverse(item.children, level + 1);
  18.       item.colSpan = item.children.reduce((sum, child) =&gt; sum + child.colSpan, 0);
  19.     }else{
  20.       items.push(item);
  21.     }
  22.   }
  23. }

<!-- language: lang-html -->

  1. &lt;script&gt;
  2. const columns = [{
  3.   title: &quot;Major1&quot;,
  4.   children: [{
  5.     title: &quot;Sub1&quot;,
  6.     children: [{
  7.       title: &quot;col1&quot;
  8.     }, {
  9.       title: &quot;col2&quot;
  10.     }]
  11.   }, {
  12.     title: &quot;col3&quot;
  13.   }]
  14. }, {
  15.   title: &quot;col4&quot;
  16. }];
  17. &lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月6日 22:32:49
  • 转载请务必保留本文链接：https://go.coder-hub.com/76629929.html
  • algorithm
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定