React EJ2 Syncfusion，条件渲染AggregatesDirective

Question

我可以从上下文菜单中使用自定义聚合函数。我想要实现的是在网格页脚中渲染所需函数的结果，但有条件。

更具体地说，我的函数和syncfusion的函数之间的区别在于我的函数在用户指定的列上进行计算。这是我尝试过的，但似乎不起作用。

{x && selectedOption ? (
              <AggregatesDirective>
                <AggregateDirective>
                  <AggregateColumnsDirective>
                    <AggregateColumnDirective
                      field={x.toString()}
                      type="selectedOption"
                      groupFooterTemplate={groupFooterTemplate}
                    />
                  </AggregateColumnsDirective>
                </AggregateDirective>
              </AggregatesDirective>
) : null}

这是 x 获取其值的地方：

  function getSelectedColumnNames() {
    if (gridInstance) {
      x = gridInstance!
        .getSelectedColumnsUid()
        .map((uid: any) => gridInstance!.getColumnByUid(uid).field);
    }
  }

selectedOption 通过在上下文菜单中选择一个选项来获取其值，如下所示：

const contextMenuClick = (args: MenuEventArgs) => {
    if (gridInstance && args.item.id === "MIN") {
      groupFooterMin();
      setSelectedOption("min");
    } else if (gridInstance && args.item.id === "MAX") {
      groupFooterMax();
      setSelectedOption("max");
    } else if (gridInstance && args.item.id === "SUM") {
      groupFooterSum();
      setSelectedOption("sum");
    } else if (gridInstance && args.item.id === "AVG") {
      groupFooterAvg();
      setSelectedOption("avg");
    }
  };

Answer 1

Syncfusion EJ2 网格确实支持显示自定义聚合，并且我们创建了一个示例级解决方案来演示如何实现这一点。该示例展示了如何通过在上下文菜单中选择项目，在不同列的网格页脚中显示自定义函数的聚合值。

有关更多信息，请参阅以下代码示例、文档和示例。

[index.js]

  const contextMenuItems = [
    { text: 'Sum', target: '.e-content', id: 'sum' },
    { text: 'Count', target: '.e-content', id: 'count' },
  ];

  const sumCustom = (props) => {
    return <span>Sum Custom: {props.Custom}</span>;
  };

  const countCustom = (props) => {
    return <span>Count Custom: {props.Custom}</span>;
  };

  const sumCustomAggregateFn = (args) => {
// do the calculation and return the value
    return 1;
  };

  const countCustomAggregateFn = (args) => {
// do the calculation and return the value
    return 2;
  };

  const contextMenuClick = (args) => {
    if (grid && args.item.id === 'sum') {
      const sum = [
        {
          columns: [
            {
              type: 'Custom',
              customAggregate: sumCustomAggregateFn,
              columnName: 'Freight',
              footerTemplate: sumCustom,
            },
          ],
        },
      ];
      grid.setProperties({ aggregates: sum });
    } else if (grid && args.item.id === 'count') {
      const count = [
        {
          columns: [
            {
              type: 'Custom',
              customAggregate: countCustomAggregateFn,
              columnName: 'ShipCountry',
              footerTemplate: countCustom,
            },
          ],
        },
      ];
      grid.setProperties({ aggregates: count });
    }
  };

        <GridComponent
          dataSource={data}
          allowPaging={true}
          pageSettings={pageSettings}
          contextMenuItems={contextMenuItems}
          ref={(g) => (grid = g)}
          contextMenuClick={contextMenuClick}
        >

自定义聚合：https://ej2.syncfusion.com/react/documentation/grid/aggregates/custom-aggregate

示例：https://stackblitz.com/edit/react-3opxvw?file=index.js