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
  }
]
}

其中列的长度以及行的长度未固定。现在我想渲染一个表格标题为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中呈现具有动态列和值的表？

1 个答案: