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

語言: CN / TW / HK

今天我們來介紹一下 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
    };
}

原文鏈接: https://www.cnblogs.com/ysmc/p/16664945.html

寫在最後

Bootstrap Blazor 官網地址: https://www.blazor.zone

希望大佬們看到這篇文章,能給項目點個star支持下,感謝各位!

star流程:

1、訪問點擊項目鏈接: BootstrapBlazor

2、點擊star,如下圖,即可完成star,關注項目不迷路:

另外還有兩個GVP項目,大佬們方便的話也點下star唄,非常感謝:

BootstrapAdmin 項目地址:

https://gitee.com/LongbowEnterprise/BootstrapAdmin

SliderCaptcha 項目地址: https://gitee.com/LongbowEnterprise/SliderCaptcha

交流羣(QQ)歡迎加羣討論

BA & Blazor ①(795206915)    BA & Blazor ②(675147445)