Blazor中Syncfusion DataGrid动态显示数值列列求和

核心思路 #

通过反射自动识别数据模型中的int/decimal类型属性，动态生成DataGrid列；同时提前计算所有数值列的总和，在列页脚模板中绑定对应结果，新增数值类型属性时无需修改代码即可自动适配。

实现步骤 #

1. 定义数据模型（示例） #

public class Order
{
    public string OrderId { get; set; }
    public int Quantity { get; set; }
    public decimal UnitPrice { get; set; }
    public decimal TotalAmount { get; set; }
    // 新增数值类型属性时，比如下面的Discount，会自动适配求和
    public decimal Discount { get; set; }
}

2. 组件内逻辑处理 #

在Blazor组件中，完成属性反射、总和计算、动态列生成：

@using Syncfusion.Blazor.Grids
@using System.Reflection

<SfGrid DataSource="@Orders" ShowFooter="true">
    <!-- 手动添加非数值类型列（可选，也可以通过反射自动生成） -->
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderId) HeaderText="订单ID"></GridColumn>
        <!-- 动态生成数值类型列 -->
        @foreach (var prop in NumericProperties)
        {
            <GridColumn Field="@prop.Name" HeaderText="@prop.Name">
                <FooterTemplate>
                    @GetSum(prop.Name)
                </FooterTemplate>
            </GridColumn>
        }
    </GridColumns>
</SfGrid>

@code {
    private List<Order> Orders { get; set; } = new();
    private List<PropertyInfo> NumericProperties { get; set; } = new();
    private Dictionary<string, object> ColumnSums { get; set; } = new();

    protected override void OnInitialized()
    {
        // 模拟从数据库获取数据
        Orders = new List<Order>
        {
            new Order { OrderId = "ORD001", Quantity = 10, UnitPrice = 50.00m, TotalAmount = 500.00m, Discount = 50.00m },
            new Order { OrderId = "ORD002", Quantity = 5, UnitPrice = 100.00m, TotalAmount = 500.00m, Discount = 25.00m }
        };

        // 反射获取模型中的int/decimal类型属性
        NumericProperties = typeof(Order).GetProperties()
            .Where(p => p.PropertyType == typeof(int) || p.PropertyType == typeof(decimal))
            .ToList();

        // 计算各数值列的总和
        CalculateColumnSums();
    }

    private void CalculateColumnSums()
    {
        ColumnSums.Clear();
        foreach (var prop in NumericProperties)
        {
            if (prop.PropertyType == typeof(int))
            {
                var sum = Orders.Sum(o => (int)prop.GetValue(o));
                ColumnSums[prop.Name] = sum;
            }
            else if (prop.PropertyType == typeof(decimal))
            {
                var sum = Orders.Sum(o => (decimal)prop.GetValue(o));
                ColumnSums[prop.Name] = sum.ToString("C2"); // 格式化金额
            }
        }
    }

    private object GetSum(string columnName)
    {
        ColumnSums.TryGetValue(columnName, out var sum);
        return sum ?? string.Empty;
    }
}

3. 关键细节说明 #

• 动态列生成：通过typeof(Order).GetProperties()反射获取所有属性，筛选出int/decimal类型，循环生成GridColumn。
• 总和计算：遍历数值属性，利用LINQ的Sum方法结合反射取值计算总和，存入字典便于页脚模板调用。
• 自动适配新增属性：只要新增的模型属性是int或decimal类型，反射逻辑会自动识别，无需修改列配置代码。

内容的提问来源于stack exchange，提问作者Mohamad Usman