如何在 jsrender 中呈现具有动态列和值的 table？

Question

我有一个像

这样的数据集

{
"columns": [
  {
    "name": "COLUMN1",
    "code": "c1"
  },
  {
    "name": "COLUMN2",
    "code": "c2"
  },
  {
    "name": "COLUMN3",
    "code": "c3"
  },
  {
    "name": "COLUMN4",
    "code": "c4"
  }
],
"rows": [
  {
    "c1": 387,
    "c2": 347.618,
    "c3": 0,
    "c4": 39.282,
  },
  {
    "c1": 390,
    "c2": 3457.618,
    "c3": 0,
    "c4": 40.282
  },
        {
    "c1": 387,
    "c2": 3447.618,
    "c3": 0,
    "c4": 39.282
  },
        {
    "c2":10,
    "c3": 0,
    "c4": 39.282
  },
        {
    "c1": 387,
    "c2": 347.618,
    "c4": 100
  }
]
}

其中列长和行长不固定。现在我想渲染一个 table with table headers as column.name 行值应该可以通过列代码访问。（就像列 COLUMN1 一样，每一行的值应该是 row.c1 等等）。

我结合了很多关于 SO 的答案和一些关于 jsrender 的文档，并提出了如下解决方案：

<html>
<body>
<table>
    <thead>
        <tr>
            {{for columns}}
                <th class="right">{{:name}}</th>
            {{/for}}

        </tr>
    </thead>

    <tbody>
        {{for rows}}
            <tr>
                {{for columns ~data=#data}}
                    {{props #data}}
                        {{if key == "code"}}
                            <td class="right">{{:~data[prop]}}</td>
                        {{/if}}
                    {{/props}}
                {{/for}}
            </tr>
        {{/for}}
    </tbody>
</table>
</body>
</html>

谁能给我一个更好的方法来做到这一点？列数组和行数组之间的唯一映射是代码字段。如果您需要任何进一步的信息，请发表评论。

P.S: 根本改不了数据结构

Answer 1

看起来你可以做到：

{{for rows}}
    <tr>
        {{for ~root.columns ~row=#data}}
            <td class="right">{{:~row[code]}}</td>
        {{/for}}
    </tr>
{{/for}}

如何在 jsrender 中呈现具有动态列和值的 table？

How to render a table with dynamic columns and values in jsrender?

jsrender

jsreport