Bootstrap Blazor 开源UI库介绍-Table 虚拟滚动行

合集 - Blazor(28)

1.【转载】NETCore Bootstrap Admin 通用后台管理权限 [2]: Blazor 版本介绍2019-12-162.【转载】开源 一套 Blazor Server 端精致套件2020-05-303.【转载】Bootstrap Blazor 组件介绍 Table （一）自动生成列功能介绍2020-12-124.【转载】Bootstrap Blazor 组件介绍 Table （二）自定义模板列功能介绍2020-12-125.BootstrapBlazor 组件库介绍2020-12-026.BootstrapBlazor 组件库使用体验---Table篇2020-07-167.Bootstrap Blazor 使用模板创建项目2022-04-058.BootstrapBlazor-Table2022-04-039.BootstrapBlazor-ValidateForm 表单验证组件2022-04-0210.BootstrapBlazor 智能生成神器（一）AutoGenerateColumnAttribute 特性介绍2022-03-3111.BootstrapBlazor - EditorForm 表单组件（一）2022-03-2812.BootstrapBlazor--Input 组件2021-10-1313.BootstrapBlazor 模板安装2021-10-1314.【转载】Bootstrap Blazor 组件介绍 Table （三）列数据格式功能介绍2020-12-1215.BA & Blazor 技术交流群2022-10-26

16.Bootstrap Blazor 开源UI库介绍-Table 虚拟滚动行2022-09-15

17.Bootstrap Blazor AutoComplete 自动完成 组件2022-05-0618.Bootstrap Blazor Table 组件（四）自定义列生成2022-05-0519.Bootstrap Blazor Table 组件（三）智能生成2022-04-2720.Bootstrap Blazor 模板使用（一）Layout 组件2022-04-2621.Bootstrap Blazor Timer 计时器组件2022-04-2322.Bootstrap Blazor Cascader 级联选择组件2022-04-1723.Blazor 组件通讯2022-04-1724.Bootstrap Blazor 组件库 Row 布局组件（栅格系统）2022-04-1225.Bootstrap Blazor Table 组件（二）手动刷新组件数据2022-04-1026.Blazor 生命周期2022-04-1027.Bootstrap Blazor Modal 模态框组件2022-04-1028.Bootstrap Blazor 组件介绍2022-04-09

收起

　　今天我们来介绍一下 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> OnQueryAsync(QueryPageOptions options)
{
    await Task.Delay(200);
    var items = Items.Skip(options.StartIndex).Take(options.PageItems);
    return new QueryData()
    {
        Items = items,
        TotalCount = Items.Count
    };
}

 为了模拟实际情况，特意加了200ms的延时，可以看到，当数据获取的期间，页面会渲染出 骨架屏 提升用户体验。

 

原文链接：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）