如何基于GroupId实现Blazor动态表格的横向数据分组展示

1. 定义数据结构与列配置 #

首先明确列的规则（对应ItemID范围和显示名称），以及用于渲染的视图模型：

列配置类 #

public class ColumnConfig
{
    // 表头显示名称
    public string DisplayName { get; set; }
    // ItemID起始范围（如1000对应1000-1999）
    public int MinItemId { get; set; }
    // ItemID结束范围
    public int MaxItemId { get; set; }
}

分组视图模型 #

用于存储每个GroupId对应的各列数据：

public class GroupedLockerRow
{
    public int GroupId { get; set; }
    // 键为列的MinItemId，值为该列下属于当前Group的Locker集合
    public Dictionary<int, List<Locker>> ColumnItems { get; set; } = new();
}

2. 后台数据处理 #

将原始Locker数据转换为适合表格渲染的分组结构：

// 假设你的原始数据源是List<Locker> Lockers;
// 初始化列配置（根据需求扩展更多列）
private List<ColumnConfig> _columns = new()
{
    new ColumnConfig { DisplayName = "A-B", MinItemId = 1000, MaxItemId = 1999 },
    new ColumnConfig { DisplayName = "B-C", MinItemId = 2000, MaxItemId = 2999 },
    new ColumnConfig { DisplayName = "C-D", MinItemId = 3000, MaxItemId = 3999 }
};

private List<GroupedLockerRow> _groupedData = new();

protected override void OnInitialized()
{
    // 按GroupId分组，再为每个分组匹配对应列的数据
    _groupedData = Lockers
        .GroupBy(l => l.GroupId)
        .Select(group => new GroupedLockerRow
        {
            GroupId = group.Key,
            ColumnItems = _columns.ToDictionary(
                col => col.MinItemId,
                col => group.Where(l => l.ItemID >= col.MinItemId && l.ItemID <= col.MaxItemId).ToList()
            )
        })
        .ToList();
}

3. Blazor前台渲染 #

动态生成表头和数据行，确保每个GroupId对应的列数据正确显示：

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Group ID</th>
            @foreach (var col in _columns)
            {
                <th>@col.DisplayName</th>
            }
        </tr>
    </thead>
    <tbody>
        @foreach (var groupRow in _groupedData)
        {
            <tr>
                <td>@groupRow.GroupId</td>
                @foreach (var col in _columns)
                {
                    <td>
                        @if (groupRow.ColumnItems[col.MinItemId].Any())
                        {
                            @foreach (var locker in groupRow.ColumnItems[col.MinItemId])
                            {
                                <div>@locker.ItemID - @locker.Name</div>
                            }
                        }
                        else
                        {
                            <span class="text-muted">-</span>
                        }
                    </td>
                }
            </tr>
        }
    </tbody>
</table>

关键说明 #

• 用范围判断替代字符串前缀匹配：直接通过ItemID的数值范围筛选，比转字符串更高效准确，避免字符串格式问题。
• 双层分组逻辑：先按GroupId对原始数据分组，再为每个分组内的数据匹配到对应列中，确保每个Group行的列数据正确对应。
• 空值处理：列无数据时显示占位符，提升表格可读性。

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