以下是一个使用Ag-Grid字符串聚合并在列上显示总和值的示例代码:
// 导入Ag-Grid所需的模块
import {GridOptions} from 'ag-grid-community';
// 创建一个Ag-Grid的列定义
const columnDefs = [
{headerName: 'Name', field: 'name'},
{headerName: 'Value', field: 'value', enableValue: true, aggFunc: 'sum'}
];
// 创建一个Ag-Grid的数据行
const rowData = [
{name: 'John', value: 10},
{name: 'Jane', value: 15},
{name: 'Mike', value: 20}
];
// 创建Ag-Grid的配置选项
const gridOptions: GridOptions = {
columnDefs: columnDefs,
rowData: rowData,
enableSorting: true,
enableFilter: true,
enableColResize: true,
enableValue: true,
rowSelection: 'single',
suppressAggFuncInHeader: true,
groupIncludeFooter: true,
suppressRowClickSelection: true,
animateRows: true,
};
// 创建Ag-Grid实例
const gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
上述代码中,我们使用了aggFunc
属性来指定聚合函数为sum
,并且通过enableValue
属性来启用值聚合。在列定义中,我们将enableValue
属性设置为true
以启用值聚合,并在field
属性中指定要聚合的字段。这样,Ag-Grid会根据指定的聚合函数对该列进行聚合,并在列的底部显示总和值。
请注意,上述代码中的gridDiv
是一个HTML元素,它是一个用于容纳Ag-Grid实例的容器。确保在运行代码之前在HTML文件中定义了一个具有相应ID的元素,如下所示:
这将创建一个具有指定ID和高度的DIV元素,用于容纳Ag-Grid实例。您可以根据需要调整高度。
以上示例将在页面上创建一个Ag-Grid实例,其中包含两列:Name和Value。Value列启用了值聚合,并使用sum函数对该列进行聚合。在Value列的底部,Ag-Grid将显示该列的总和值。