Bootstrap Blazor 開源UI庫介紹-Table 虛擬滾動行

2022 年 9 月 15 日
筆記
.NET Core, Blazor, BootstrapBlazor

　　今天我們來介紹一下 Bootstrap Blazor 中 Table 組件的虛擬滾動行，什麼是虛擬滾動呢，我查到的解釋是：只渲染可視區域的列表項，非可見區域的完全不渲染，在滾動條滾動時動態更新列表項。

　　然後很明顯，在實際應用中不可能實現「非可見區域的完全不渲染」，這樣的體驗效果太差了，下拉直接空白，所以一般會渲染3屏或者是3頁數據，分別是當前頁、上一頁、下一頁，當用戶滾動到下一頁的時候，將會自動加載再下一頁，頁面不會出現空白的情況，體驗就非常爽了。

　　有一小部分帥氣（漂亮）的小夥伴可能就會問了，那一直滾動一直加載，後面不會很卡嗎？答案是不會的，上面說到「只渲染可視區域的列表項，非可見區域的完全不渲染」，而一般是渲染3屏或者3頁數據，也就是說，除了這3個，其餘的統統不渲染，通俗點來說就是看不見它就刪掉它，這樣在頁面中，就永遠最多只會渲染3頁數據，除非你一行的數據量頁極大，不然不會出現卡頓的情況，請小夥伴們放心！形象點請看下圖：

　　回來我們今天的主角-Bootstrap Blazor UI庫 Table 組件虛擬滾動行，他是實現原理跟上面說的大體一致，當需要顯示大量數據時通常採用分頁加載數據，但是每次都要去點下一頁有時候也是一件繁瑣的事情，所以組件就支持虛擬滾動啦！

　　功能的實現，其實是基於微軟官方的虛擬化組件，感興趣的小夥伴可以去看看，傳送門

　　而在我們的BootstrapBlazor 的 Table 組件中，怎麼去使用虛擬滾動呢，首先需要設置 ScrollMode Height RowHeight PageItems 參數對虛擬滾動進行設置，並將 ScrollMode 設置成 “ScrollMode.Virtual” 我們直接看看代碼

razor

<Table TItem = "Foo" IsBordered="true" IsStriped="true" Items="Items" ScrollMode="ScrollMode.Virtual">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" Width="180" />
        <TableColumn @bind-Field="@context.Name" />
        <TableColumn @bind-Field="@context.Address" Readonly="true" />
        <TableColumn @bind-Field="@context.Education" />
        <TableColumn @bind-Field="@context.Count" Editable="false" />
        <TableColumn @bind-Field="@context.Complete" />
    </TableColumns>
</Table>

　　上面的Table 組件的數據源是使用了Items，也就是說數據從開始的時候已經全部加載到了內存中，只是部將其全部渲染到前端頁面而已，當數據量非常大的時候，這種方式明顯是不適合的，會給服務端帶來很大的壓力，我們可以通過設置 Table 組件的 OnQueryAsync 回調，動態獲取數據，用法上需要注意的一個點是，虛擬滾動的開始頁碼屬性，不再是使用 options.PageIndex 而是使用 options.StartIndex

razor

<Table TItem = "Foo" IsBordered="true" IsStriped="true" ScrollMode="ScrollMode.Virtual" OnQueryAsync="OnQueryAsync">
   <TableColumns>
       <TableColumn @bind-Field="@context.DateTime" Width="180" />
       <TableColumn @bind-Field="@context.Name" />
       <TableColumn @bind-Field="@context.Address" Readonly="true" />
       <TableColumn @bind-Field="@context.Education" />
       <TableColumn @bind-Field="@context.Count" Editable="false" />
       <TableColumn @bind-Field="@context.Complete" />
   </TableColumns>
</Table>

razor.cs

private async Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
{
    await Task.Delay(200);
    var items = Items.Skip(options.StartIndex).Take(options.PageItems);
    return new QueryData<Foo>()
    {
        Items = items,
        TotalCount = Items.Count
    };
}