table显示合计、明细表合计
主表合计
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中；二选一实现
vue3代码
//可以多options.js中把columns复制过来修改
const onInit=($vm)=> {
gridRef=$vm;
//设置主表求字段，后台需要实现SummaryExpress方法
columns.forEach(x => {
if (x.field == '字段') {
x.summary = true;
//计算平均值
//x.summary = 'avg';
//设置小数显示位数(默认2位)
// x.numberLength = 4;
//这里也可以自定义返回合计的格式、文本显示
x.summaryFormatter = (val, column, rows, summaryData) => {
if (!val) return '0.00';
summaryData[0] = '汇总';
return ( '￥' + (val + '').replace(/\B(?=(\d{3})+(?!\d))/g, ',')
);
};
}
})
}
vue2代码
onInit(){
//设置主表合计
this.summary = true;
//设置主表求字段，后台需要实现SummaryExpress方法
this.columns.forEach(x => {
if (x.field == '字段') {
x.summary = true;
//计算平均值
//x.summary = 'avg';
//设置小数显示位数(默认2位)
// x.numberLength = 4;
//这里也可以自定义返回合计的格式、文本显示
x.summaryFormatter = (val, column, rows, summaryData) => {
if (!val) return '0.00';
summaryData[0] = '汇总';
return ( '￥' + (val + '').replace(/\B(?=(\d{3})+(?!\d))/g, ',')
);
};
}
})
}
后台代码
注意：合计方法写在主表service类中，具体见:后台开发->主表查询、主表合计、查看实际执行sql
//查询(主表合计)
public override PageGridData<主表表名> GetPageData(PageDataOptions options)
{
//EF:查询table界面显示合计（需要与前端开发文档上的【table显示合计】一起使用）
SummaryExpress = (IQueryable<主表表名> queryable) =>
{
return queryable.GroupBy(x => 1).Select(x => new
{
//AvgPrice注意大小写和数据库字段大小写一样
Qty = x.Sum(o => o.Qty).ToString("f2")
})
.FirstOrDefault();
};
////sqlsugar：查询table界面显示合计（需要与前端开发文档上的【table显示合计】一起使用）
// SummaryExpress = (ISugarQueryable<主表表名> queryable) =>
// {
// return queryable.Select(x => new
// {
// FundsSum = SqlFunc.AggregateSum(x.FundsSum),
// HasPayedSum = SqlFunc.AggregateSum(x.HasPayedSum),
// NeedPaySum = SqlFunc.AggregateSum(x.NeedPaySum),
// Items = SqlFunc.AggregateSum(x.Items)
// })
// .FirstOrDefault();
// };
return base.GetPageData(options);
}
明细表合计
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中；二选一实现
vue3代码
const onInited=()=> {
//设置合计字段，后台需要实现SummaryExpress方法
gridRef.detailOptions.columns.forEach(x => {
if (x.field == '字段') {
x.summary = true;
//计算平均值
//x.summary = 'avg';
//设置小数显示位数(默认2位)
// x.numberLength = 4;
//这里也可以自定义返回合计的格式、文本显示
x.summaryFormatter = (val, column, rows, summaryData) => {
if (!val) return '0.00';
summaryData[0] = '汇总';
return ( '￥' + (val + '').replace(/\B(?=(\d{3})+(?!\d))/g, ',')
);
};
}
})
}
vue2代码
onInited(){
//设置合计字段，后台需要实现SummaryExpress方法
this.detailOptions.columns.forEach(x => {
if (x.field == '字段') {
x.summary = true;
//计算平均值
//x.summary = 'avg';
//设置小数显示位数(默认2位)
// x.numberLength = 4;
//这里也可以自定义返回合计的格式、文本显示
x.summaryFormatter = (val, column, rows, summaryData) => {
if (!val) return '0.00';
summaryData[0] = '汇总';
return ( '￥' + (val + '').replace(/\B(?=(\d{3})+(?!\d))/g, ',')
);
};
}
})
后台代码
注意：明细表合计是写在主表service类中，具体见:后台开发->明细表查询、明细表合计
protected override object GetDetailSummary<Detail>(IQueryable<Detail> queryeable)
{
//需要与【前端开发】文档上的合计一起使用
//判断是哪张明细表
if (typeof(Detail)==typeof(明细表表名))
{
//ef写法（需要与前端开发文档上的【table显示合计】一起使用）
return ((IQueryable<明细表表名>)queryeable).GroupBy(x => 1).Select(x => new
{
//Weight/Qty注意大小写和数据库字段大小写一样
Weight = x.Sum(o => o.Weight),
Qty = x.Sum(o => o.Qty)
}).FirstOrDefault();
//sqlsugar写法（需要与前端开发文档上的【table显示合计】一起使用）
// return (ISugarQueryable<明细表表名> queryable).Select(x => new
// {
// FundsSum = SqlFunc.AggregateSum(x.FundsSum),
// HasPayedSum = SqlFunc.AggregateSum(x.HasPayedSum),
// NeedPaySum = SqlFunc.AggregateSum(x.NeedPaySum),
// Items = SqlFunc.AggregateSum(x.Items)
// }).FirstOrDefault();
}
return null
}