# Datagrid 汇总合计行
- datagrid 属性
`showFooter` : 显示页脚
`footerHeight`: 合计行高度
`footerTemplate`: 合计行模板
列属性中增 加 footer 属性
```javascript
// 列属性
{field: 'age', title: '数字',
// 这里合计列格式化设置
footer: {
options?: {
/** 计算类型 */
calculationType?: CalculationType,
/** 静态文本，直接附加到TD 中 */
text?: string;
};
/** 文本对齐方式 */
align?: 'left' | 'center' | 'right';
/** 数据格式化 */
formatter?: (value, rowData, rowIndex) => any | ColumnFormatter;
/** 单元格样式 */
styler?: (value, rowData, rowIndex) => CustomStyle;
}
}
```
# 示例
1、格式化数字
```javascript
{
options: {
calculationType: CalculationType.sum
},
styler: (v, d, i) => {
return {
style: {
color: 'red',
fontWeight: 800
}
};
},
formatter: {
type: 'number',
options: {
prefix: '￥', // 前置符号
suffix: '元', // 后置字符
precision: 2, // 精度
decimal: '.', // 小数分隔符
thousand: ',' // 千分位
}
}
}
```
2、计数
```javascript
{
options: { calculationType: CalculationType.count},
formatter: (v, d, i) => {
return `共 ${v} 条`;
}
}
```
3、静态文本
```javascript
{
options: { text: '本页合计'},
formatter: (v, d, i) => {
return `${v}`;
}
}
```
4、最大值
```javascript
{
options: { calculationType: CalculationType.max},
formatter: (v, d, i) => { // 也可以不生成
return v;
}
}
```
5、最小值
```javascript
{
options: { calculationType: CalculationType.min},
formatter: (v, d, i) => { // 也可以不生成
return v;
}
}
```
6、平均值
```javascript
{
options: { calculationType: CalculationType.average},
formatter: (v, d, i) => { // 也可以不生成
return v;
}
}
```
> formatter 支持自定义函数及配置型（仅数字）
# 自定义合计行模板
> 启用合计行模板后，列属性中相关合计行的设置将失效！！
### 在模板设置合计行模板
``` html
本页合计
本年总收入：￥ 7.3589 亿元，本月总支出：￥ 4,908,789.00 元
```