JsViews / JsRender table 使用 GroupBy 渲染 attribute/property

Question

我正在使用 JsViews 设计模板。但是我想知道我们是否可以根据其字符串值对属性进行分组？

JSON样本：

"ItemDetails": [
    {
        "Amount": 2000,
        "Name": "Horror Book",
    },
    {
        "Amount": 3500,
        "Name": "Horror Book",
    },
    {
        "Amount": 1000,
        "Name": "Children Book",
    },
],

当前代码概述了每个项目，即使它具有相同的名称。

{{for ItemDetails}}
{{if Amount}}
            <row>
                <col>{{>Name}}</col>
                <col>{{>Amount}}</col>
            </row>
{{/if}}
{{/for}}

我希望它有这样的结果：

恐怖书5500本

童书1000本

Answer 1

JsRender/JsViews {{for}} and {{props}} tags have built-in support for sorting, filtering etc, but don't have a built-in groupBy feature. But you can fairly easily create one, following similar techniques to the grid with ~total() 样本。

这是一种使用辅助函数的方法：

<table><tbody>
  {{for ItemDetails sort="Name"}}
    {{if ~groupBy("Name", "Amount")}}
      <tr>
        <td>{{>Name}}</td>
        <td>{{>~total()}}</td>
      </tr>
    {{/if}}
  {{/for}}
</tbody></table>

https://jsfiddle.net/BorisMoore/nx3atd1q/

这里是一个使用过滤功能的替代版本 {{for}}:

<table><tbody>
  {{for ItemDetails sort="Name" filter=~groupBy groupTotal="Amount"}}
    <tr>
      <td>{{>Name}}</td>
      <td>{{:~total()}}</td>
    </tr>
  {{/for}}
</tbody></table>

https://jsfiddle.net/BorisMoore/o4pt3brq/

JsViews / JsRender table 使用 GroupBy 渲染 attribute/property

JsViews / JsRender table rendering with GroupBy an attribute/property

javascript

jsrender

jsviews