Bootstrap Blazor - 企业级 UI 组件库

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

Table 合计功能

用于数据统计

数据统计示例

设置 ShowFooter=true 显示 Footer 自定义合计功能

Demo

Table 组件有 TableFooter 模板，其数据上下文为 Table 组件的数据集合 IEnumerable<TItem>

TableFooter 模板中关联的上下文 context 值为当页数据

TableFooter 模板内可以自定义单元格 td 内容，也可以使用内置的 TableFooterCell 组件进行数据显示

@page "/tables/footer"

<h3>Table 合计功能</h3>

<h4>用于数据统计</h4>

<Block Title="数据统计示例" Introduction="设置 <code>ShowFooter=true</code> 显示 <code>Footer</code> 自定义合计功能">
    <p><code>Table</code> 组件有 <code>TableFooter</code> 模板，其数据上下文为 <code>Table</code> 组件的数据集合 <code>IEnumerable&lt;TItem&gt;</code></p>
    <p><code>TableFooter</code> 模板中关联的上下文 <code>context</code> 值为当页数据</p>
    <p><code>TableFooter</code> 模板内可以自定义单元格 <code>td</code> 内容，也可以使用内置的 <code>TableFooterCell</code> 组件进行数据显示</p>
    <Table TItem="Foo" ShowFooter="true" class="footer-demo"
           IsPagination="true" PageItemsSource="@PageItemsSource" OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
        <TableFooter>
            <TableFooterCell colspan="3" Text="合计：" />
            <TableFooterCell Text="@context.Sum(i => i.Count).ToString()" />
        </TableFooter>
    </Table>
</Block>