在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

假如有下面的一組數(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
            }
        }
    }
]

有沒有不是特別復(fù)雜辦法生成下面的table
主要是怎么通過計算的方式生成復(fù)雜的表頭，因為數(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
回答
編輯回答
念初

好吧，好像確實有問題

clipboard.png

后來又嘗試寫了一下

  • 先把數(shù)組每個元素當成一個樹，之后合并到一個樹中
  • 前序遍歷求出每個節(jié)點下所有葉子節(jié)點的個數(shù)，比如 type2 這個節(jié)點就有5個所有葉子節(jié)點
  • 層序遍歷這個樹的每個節(jié)點，每層開始在表頭添加一個 tr 元素 ，并記錄下這個元素。然后遍歷這一層的節(jié)點，如果有子節(jié)點則添加 <td colspan="x">，x 為上面所有葉子節(jié)點數(shù)量；如果沒有子節(jié)點則添加 <td rowspan="y"> y 為 “合并樹的最大深度 - 當前深度” （表頭畫完）
  • 遍歷數(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)
}

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

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

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

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

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

之后一層一層遍歷這個對象樹，就能得到整個表頭了

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

2018年5月27日 02:58