具有可扩展行的 Blazor Table

Question

我需要创建一个包含多个可折叠部分的 table（请参阅 Example table）。我发现了几个非常好的框架（例如 https://blazor.syncfusion.com/documentation/pivot-table/getting-started）。然而，它们都是昂贵的。

有没有办法在不使用整个框架的情况下创建这样的 table？

不幸的是，我找不到任何好的博客、教程或 Github 存储库来实现类似的东西而不使用框架。
我查看了问题 67594373 (Simple expandable table with Blazor)。这几乎是一个类似的问题。但是，缺少的是左侧显示折叠状态的符号。所以我认为它们也必须在单击一行时进行更新。但是我也觉得table的整个结构不是我需要的。

非常感谢任何代码或资源建议，因为这非常重要。

Answer 1

希望以下内容能给您一些建议。你需要两个主要的东西：

每个国家（或任何你的主要组）在显示 class 中的一个 bool 变量来跟踪它是否应该显示每个城市（或任何你的子组）；
right-triangle、down-triangle 的 Unicode 字符。您可以通过谷歌搜索“unicode right arrow”或其他任何方式找到很多符号。我使用了代码，但通常你可以复制你找到的实际符号并将其直接粘贴到你的标记中，如下所示：▶ ▼

（由于 html table 元素，我无法在 Stack Overflow 代码块中正确显示该示例，因此请检查以下 Blazor fiddle 中的代码):

https://blazorfiddle.com/s/o7mk3izx

这是一个使用 Bootstrap classes 作为布局而不是表格的版本：

<div class="container">
    <div class="row">
        <div class="col-3">Region</div>
        <div class="col-3" >Sales</div>
    </div>
    @foreach (var country in Countries)
    {
        <div class="row" style="cursor:pointer;" @onclick="()=>country.ShowCities = !country.ShowCities">
            <div class="col-3">
                @if (!country.ShowCities)
                {
                    <span>&#x25b6;</span>
                }
                else
                {
                    <span>&#x25bc;</span>
                }
                &nbsp;@country.Name
            </div>
            <div class="col-3">@(AllCitySales.Where(acs=>acs.CountryID==country.ID).Sum(cs=>cs.Sales))</div>
        </div>
        if (country.ShowCities)
        {
            foreach (var city in AllCitySales.Where(acs => acs.CountryID == country.ID))
            {
                <div class="row">
                    <div class="col-3">&nbsp;&nbsp;&#8226;&nbsp;@city.Name</div>
                    <div class="col-3">@city.Sales</div>
                </div>
            }
        }
    }
</div>

@code {
    public class Country
    {
        public int? ID;
        public string? Name;
        public bool ShowCities;
    }
    public class CitySales
    {
        public int ID;
        public int CountryID;
        public string? Name;
        public int Sales;
    }
    public List<Country> Countries = new List<Country>
    {
        new Country{ ID = 1, Name="France"},
        new Country{ ID = 2, Name="England"}
    };
    public List<CitySales> AllCitySales = new List<CitySales>
    {
        new CitySales{ ID = 1, CountryID = 1, Name="Paris", Sales = 453},
        new CitySales{ ID = 2, CountryID = 1, Name="Marseille", Sales = 100},
        new CitySales{ ID = 3, CountryID = 2, Name="New York", Sales = 123},
        new CitySales{ ID = 4, CountryID = 2, Name="Los Angeles", Sales = 420},
        new CitySales{ ID = 5, CountryID = 2, Name="Scranton", Sales = 69}
    };
}

具有可扩展行的 Blazor Table

Blazor Table with expandable rows

c#

blazor

blazor-webassembly

.net-6.0