1

我有一个像

{
"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>

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

PS：我根本无法更改数据结构。

4

1 回答 1

1

看起来你可以这样做：

{{for rows}}
    <tr>
        {{for ~root.columns ~row=#data}}
            <td class="right">{{:~row[code]}}</td>
        {{/for}}
    </tr>
{{/for}}
于 2017-08-25T19:32:51.597 回答