鍍金池/ 問(wèn)答/HTML/ 關(guān)于js通過(guò)數(shù)據(jù)格式自動(dòng)生成表頭的問(wèn)題，合并單元格

關(guān)于js通過(guò)數(shù)據(jù)格式自動(dòng)生成表頭的問(wèn)題，合并單元格

假如有下面的一組數(shù)據(jù)

[
    {
        name: 'AAA',
        age: 12,
        score: {
            type1: {
                item1: 12,
                item2: 23,
                item3: 23
            },
            type2: {
                item4: 12,
                item5: 23,
                item6: 23
            }
        }
    }, {
        name: 'BBB',
        age: 12,
        score: {
            type1: {
                item1: 12,
                item2: 23,
                item3: 23
            },
            type2: {
                item4: 12,
                item5: 23,
                item6: 23
            }
        }
    }
]

有沒(méi)有不是特別復(fù)雜辦法生成下面的table
主要是怎么通過(guò)計(jì)算的方式生成復(fù)雜的表頭，因?yàn)閿?shù)據(jù)格式是不一定的，我搞了一天了搞不明白，特此求助

name age score
type1 type2
item1 item2 item3 item1 item2 item3
AAA 12 12 23 23 12 23 23
AAA 12 12 23 23 12 23 23
回答
編輯回答
念初

好吧，好像確實(shí)有問(wèn)題

clipboard.png

后來(lái)又嘗試寫了一下

  • 先把數(shù)組每個(gè)元素當(dāng)成一個(gè)樹(shù)，之后合并到一個(gè)樹(shù)中
  • 前序遍歷求出每個(gè)節(jié)點(diǎn)下所有葉子節(jié)點(diǎn)的個(gè)數(shù)，比如 type2 這個(gè)節(jié)點(diǎn)就有5個(gè)所有葉子節(jié)點(diǎn)
  • 層序遍歷這個(gè)樹(shù)的每個(gè)節(jié)點(diǎn)，每層開(kāi)始在表頭添加一個(gè) tr 元素 ，并記錄下這個(gè)元素。然后遍歷這一層的節(jié)點(diǎn)，如果有子節(jié)點(diǎn)則添加 <td colspan="x">，x 為上面所有葉子節(jié)點(diǎn)數(shù)量；如果沒(méi)有子節(jié)點(diǎn)則添加 <td rowspan="y"> y 為 “合并樹(shù)的最大深度 - 當(dāng)前深度” （表頭畫完）
  • 遍歷數(shù)組中每一個(gè)樹(shù)，完善數(shù)據(jù)
const appendTd = (tr, hasChild, size, name) => {
  const td = document.createElement('td')
  if (hasChild) {
    td.setAttribute('colspan', size)
  } else {
    td.setAttribute('rowspan', size)
  }
  td.innerText = name
  tr.appendChild(td)
}

//------------ 原答案 ----------------

這里只提供一種思路，詳細(xì)代碼就不寫了

// const data = ...原始數(shù)據(jù)
let table = {}
data.map((item) => {
  table = {...table, ...item}
})
console.log(table)

首先利用 es6 解構(gòu)，將所有對(duì)象具有的屬性合并起來(lái)，你就可以得到一個(gè)完整的表頭的結(jié)構(gòu)，這里數(shù)據(jù)不重要。

{ name: 'BBB',
  age: 12,
  score:
   { type1: { item1: 12, item2: 23, item3: 23 },
     type2: { item4: 12, item5: 23, item6: 23 } } }

之后一層一層遍歷這個(gè)對(duì)象樹(shù)，就能得到整個(gè)表頭了

表頭畫好后，用剛剛得到的表頭去挨個(gè)遍歷每個(gè)數(shù)據(jù)項(xiàng)，并且畫單元格，沒(méi)有數(shù)據(jù)不填。

2018年5月27日 02:58