如何在 javascript react 中创建动态 colspan 表

Question

如何在 javascript react 中从 json 数据生成动态 colspan 表。 在 obj 中，

w1,w2 代表组头， t1,t2 表示表头

对于每一项，按时间显示数据，按周分组， 任何库或任何可能的创建方式， 我真的被卡住了。

var obj =  {
  options: {
    w1: {start:"sep",end: "6"},
    w2: {start:"nov", end: "5"}
  },
  intervals: {
    t1: {begin: "1", end: "2", totalqty: 2,totalamt: 200},
    t2: {begin: "4", end: "7", totalqty: 3, totalamt: 300},
  }
  items: [
    {
      name: "s1",
      desc: "sample1",
      w1: {t1: {qty:0, amt: 100},t2: {qty:1, amt: 200}},
      w2: {t1: {qty:1, amt: 100},t2: {qty:2, amt: 200}}
    }
    {
      name: "s2",
      desc: "sample2",
      w1: {t1: {qty:0, amt: 100},t2: {qty:0, amt: 0}},
      w2: {t1: {qty:0, amt: 0},t2: {qty:1, amt: 200}}
    }
  ]
}

预期输出

Answer 1

这是我想出的：sandbox。它不专注于样式，而是专注于生成行。

我已经在我认为可能需要的地方添加了 cmets，如果有不清楚的地方我会更新我的答案。

注意事项：

• 只要有数组，我就将数组索引用于关键属性，但这只是 用于演示目的。在此处阅读有关Lists and Keys 的更多信息并思考 选择合适的 ID。
• 我用Object.values 让它更清楚一点，但如果你 需要支持 IE 您需要将其重写为 Object.keys 和 Array.map 或 别的东西。检查browser support。
• 我已将区间标头的 colspan 硬编码为 4，但是 我认为，让它充满活力并不是什么大不了的事。
• 在 ItemRow 组件内部，我将结构稍微展平了一点 使其更易于使用且更具可读性。 所以我尝试过 在可读性和性能之间取得平衡。 如果这是 作为某些性能关键功能的一部分，您可能希望 进一步衡量和优化。