Bootstrap Blazor - 一套企业级 UI 组件库

显示明细行功能

用于展示父子关系表数据

简单应用

通过设置 DetailRowTemplate 模板设置明细行内容

Demo

明细行内显示绑定行的另外一个字段 学历 以普通文字形式呈现

<Table TItem="BindItem"
       IsPagination="true" PageItemsSource="@PageItemsSource"
       IsStriped="true" IsBordered="true"
       ShowToolbar="true" ShowDefaultButtons="false"
       OnQueryAsync="@OnQueryAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" Width="180" />
        <TableColumn @bind-Field="@context.Name" Width="100" />
        <TableColumn @bind-Field="@context.Address" />
        <TableColumn @bind-Field="@context.Count" />
    </TableColumns>
    <DetailRowTemplate>
        <div>学历: @typeof(EnumEducation).ToDescriptionString(context.Education.ToString())</div>
    </DetailRowTemplate>
</Table>

嵌套 Table 组件应用

通过设置 DetailRowTemplate 模板设置明细行为子表数据

Demo

明细行内嵌套另外一个 Table 组件，由于每行都要关联子表数据，出于性能的考虑，此功能采用 懒加载 模式，即点击展开按钮后，再对嵌套 Table 进行数据填充，通过 ShowDetailRow 回调委托可以控制每一行是否显示明细行，本例中通过 Complete 属性来控制是否显示明细行，可通过翻页来测试本功能

<Table TItem="BindItem"
       IsPagination="true" PageItemsSource="@PageItemsSource"
       IsStriped="true" IsBordered="true"
       ShowToolbar="true" ShowDefaultButtons="false"
       OnQueryAsync="@OnQueryAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" Width="180" />
        <TableColumn @bind-Field="@context.Name" Width="100" />
        <TableColumn @bind-Field="@context.Address" />
        <TableColumn @bind-Field="@context.Count" />
    </TableColumns>
    <DetailRowTemplate>
        @{
            var DetailDataSource = GetDetailRowsByName(context.Name ?? "");
        }
        <Table TItem="DetailRow" IsBordered="true" ShowToolbar="false" Items="@DetailDataSource">
            <TableColumns Context="Detail">
                <TableColumn @bind-Field="@Detail.Name" />
                <TableColumn @bind-Field="@Detail.DateTime" Width="180" />
                <TableColumn @bind-Field="@context.Complete" Width="70">
                    <Template Context="v">
                        <Switch IsDisabled="true" Value="v.Value" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
                    </Template>
                </TableColumn>
            </TableColumns>
        </Table>
    </DetailRowTemplate>
</Table>

@code {
    private IEnumerable<DetailRow> GetDetailRowsByName(string name) => Enumerable.Range(1, 4).Select(i => new DetailRow()
    {
        Id = i,
        Name = name,
        DateTime = DateTime.Now.AddDays(i - 1),
        Complete = random.Next(1, 100) > 50
    });

    private class DetailRow
    {
        [DisplayName("主键")]
        public int Id { get; set; }

        [DisplayName("培训课程")]
        public string Name { get; set; } = "";

        [DisplayName("日期")]
        public DateTime DateTime { get; set; }

        [DisplayName("是/否")]
        public bool Complete { get; set; }
    }
}

固定表头开启明细行功能

通过设置 Height 固定表头后模板设置明细行内容

Demo

本例中固定表头后，再开启明细行功能

<Table TItem="BindItem" Height="200"
       IsStriped="true" IsBordered="true"
       ShowToolbar="true" ShowDefaultButtons="false"
       OnQueryAsync="@OnQueryAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" Width="180" />
        <TableColumn @bind-Field="@context.Name" Width="100" />
        <TableColumn @bind-Field="@context.Address" />
        <TableColumn @bind-Field="@context.Count" />
    </TableColumns>
    <DetailRowTemplate>
        <div>学历: @typeof(EnumEducation).ToDescriptionString(context.Education.ToString())</div>
    </DetailRowTemplate>
</Table>

明细行中使用 Tab 组件

通过设置 DetailRowTemplate 模板设置明细行内容

Demo

本例中明细行内使用 Tab 组件再次将数据分割成两个 TabItem 内容，进行再次数据拆分演示

<Table TItem="BindItem" IsPagination="true" PageItemsSource="@PageItemsSource"
       IsStriped="true" IsBordered="true"
       ShowToolbar="true" ShowDefaultButtons="false"
       OnQueryAsync="@OnQueryAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" Width="180" />
        <TableColumn @bind-Field="@context.Name" Width="100" />
        <TableColumn @bind-Field="@context.Address" />
        <TableColumn @bind-Field="@context.Count" />
    </TableColumns>
    <DetailRowTemplate>
        <Tab>
            <TabItem Text="明细数据">
                    @{
                        // 此段代码为提高性能
                        var cacheKey = context.Name ?? "";
                        var DetailDataSource = Enumerable.Empty<DetailRow>();
                        if (Cache.ContainsKey(cacheKey))
                        {
                            DetailDataSource = Cache[cacheKey];
                        }
                        else
                        {
                            DetailDataSource = GetDetailRowsByName(cacheKey).ToList();
                            Cache.Add(cacheKey, DetailDataSource);
                        }
                    }
                    <Table TItem="DetailRow" IsBordered="true" ShowToolbar="false" Items="@DetailDataSource">
                        <TableColumns Context="Detail">
                            <TableColumn @bind-Field="@Detail.Name" />
                            <TableColumn @bind-Field="@Detail.DateTime" Width="180" />
                            <TableColumn @bind-Field="@context.Complete" Width="70">
                                <Template Context="v">
                                    <Switch IsDisabled="true" Value="v.Value" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
                                </Template>
                            </TableColumn>
                        </TableColumns>
                    </Table>
            </TabItem>
            <TabItem Text="关联数据">
                <div>学历: @typeof(EnumEducation).ToDescriptionString(context.Education.ToString())</div>
            </TabItem>
        </Tab>
    </DetailRowTemplate>
</Table>