当前位置: 首页 > news >正文

Blazor 虚拟滚动/瀑布流加载Table数据

@page "/virtualScrolling"
@using BlazorApp.Data<h3>Table 虚拟滚动行</h3>
<h4>Table 组件显示大数据时通常采用分页加载数据,还有一种虚拟行的技术类似手机滚动到底部时后台自动加载数据</h4><p>快速滚动时显示行占位,提升用户体验</p><p>PageItems:设置页大小,Height:设置Table的高度,ScrollMode="ScrollMode.Virtual"开启虚拟滚动功能</p><p>当前页大小: @PageCount</p><Table TItem="Foo" Height="300" PageItems="20" 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>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using System.Net.Http;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Routing;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.Web.Virtualization;
using Microsoft.JSInterop;
using BlazorApp;
using BlazorApp.Shared;
using BootstrapBlazor.Components;
using BlazorApp.Data;
using System.Diagnostics.CodeAnalysis;namespace BlazorApp.Pages
{public partial class VirtualScrolling{[NotNull]private List<Foo>? DBList { get; set; }[NotNull]private int PageCount { get; set; }/// <summary>/// OnInitialized/// </summary>protected override void OnInitialized(){base.OnInitialized();//模拟数据库DBList = Foo.GenerateFoo(10000);}private async Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options){//控制加载数据,避免卡死await Task.Delay(200);//从数据库读取分页的总数int count = DBList.Count;//分页获取var items = DBList.Skip(options.StartIndex).Take(options.PageItems);PageCount = options.PageItems;//异步方法需要主动调用这个方法,告诉前台Blazor的状态已经改变StateHasChanged();return new QueryData<Foo>(){Items = items,TotalCount = count};}}
}

相关文章:

Blazor 虚拟滚动/瀑布流加载Table数据

page "/virtualScrolling" using BlazorApp.Data<h3>Table 虚拟滚动行</h3> <h4>Table 组件显示大数据时通常采用分页加载数据&#xff0c;还有一种虚拟行的技术类似手机滚动到底部时后台自动加载数据</h4><p>快速滚动时显示行占位&am…...

数字化浪潮下,AI数字人融入多元化应用场景

随着AI数字人技术的发展&#xff0c;各个行业都在不断挖掘数字人更多的潜力&#xff0c;VR全景中的AI数字人功能逐渐成为了一种新颖的用户交互方式。AI数字人将企业的文化、品牌价值、商业服务等充分结合为一体&#xff0c;为企业提供了全新的机会&#xff0c;从客户互动到营销…...

JVM虚拟机:JVM的垃圾回收清除算法(GC)有哪些

垃圾回收清除算法 引用计数法 标记清除 拷贝算法 标记压缩 引用计数法 有一个引用指向对象,那么引用计数就加1,少一个引用指向,那么引用计数就减1,这种方法了解一下就好,JVM机会不会使用这种方法,因为它在每次对象赋值的时候都要维护引用计数器,且计数器本身也有一定的…...

我应该删除低质量页面以提高Google排名吗?

为什么考虑删除低质量页面&#xff1f; 上个月&#xff0c;根据Google的搜索团队John Mueller和Gary Illyes在 “Search Off the Record”播客中的讨论&#xff0c;质量是影响搜索的几乎每一个方面的关键因素。 虽然高质量的内容不能保证高排名&#xff0c;但它可以影响Googl…...

【实战Flask API项目指南】之六 数据库集成 SQLAlchemy

实战Flask API项目指南之 数据库集成 本系列文章将带你深入探索实战Flask API项目指南&#xff0c;通过跟随小菜的学习之旅&#xff0c;你将逐步掌握 Flask 在实际项目中的应用。让我们一起踏上这个精彩的学习之旅吧&#xff01; 前言 在上一篇文章中&#xff0c;我们实现了…...

MFC网络通信-Udp服务端

目录 1、UI的布局 2、代码的实现&#xff1a; &#xff08;1&#xff09;、自定义的子类CServerSocket &#xff08;2&#xff09;、重写OnReceive事件 &#xff08;3&#xff09;、在CUdpServerDlg类中处理 &#xff08;4&#xff09;、在OnInitDialog函数中 &#xff0…...

最简单且有效的msvcp140.dll丢失的解决方法,有效的解决msvcp140.dll丢失

在我们使用电脑的过程中&#xff0c;有时会遇到一些令人困扰的问题&#xff0c;如msvcp140.dll文件丢失。对于许多不熟悉这方面技术的小伙伴来说&#xff0c;遇到msvcp140.dll丢失的问题可能会觉得棘手。其实这是一个很常见的问题&#xff0c;并且解决起来并不复杂。接下来将给…...

HBase理论与实践-基操与实践

基操 启动&#xff1a; ./bin/start-hbase.sh 连接 ./bin/hbase shell help命令 输入 help 然后 <RETURN> 可以看到一列shell命令。这里的帮助很详细&#xff0c;要注意的是表名&#xff0c;行和列需要加引号。 建表&#xff0c;查看表&#xff0c;插入数据&#…...

内存管理设计精要

系统设计精要是一系列深入研究系统设计方法的系列文章&#xff0c;文中不仅会分析系统设计的理论&#xff0c;还会分析多个实际场景下的具体实现。这是一个季更或者半年更的系列&#xff0c;如果你有想要了解的问题&#xff0c;可以在文章下面留言。 持久存储的磁盘在今天已经不…...

Java——StringBuffer与StringBuilder的区别

Java——StringBuffer与StringBuilder的区别 StringBuffer和StringBuilder是Java中用于处理字符串的两个类&#xff0c;它们之间的主要区别在于线程安全性和性能方面。 1. 线程安全性&#xff1a; StringBuffer&#xff1a;StringBuffer 是线程安全的&#xff0c;所有的公共方…...

基于深度学习的菠萝与果叶视觉识别及切断机构设计

收藏和点赞&#xff0c;您的关注是我创作的动力 文章目录 概要 一、课题内容二、总体方案确定2.1 方案选择2.2 菠萝的视觉识别流程2.3 菠萝果叶切断机构设计流程 三 基于深度学习的菠萝检测模型3.1 卷积神经网络简介3.2 YOLO卷积神经网络3.3 图像采集与数据制作3.4 数据训练与…...

springboot整合七牛云oss操作文件

文章目录 springboot整合七牛云oss操作文件核心代码&#xff08;记得修改application.yml配置参数⭐&#xff09;maven依赖QiniuOssProperties配置类UploadControllerResponseResult统一封装响应结果ResponseType响应类型枚举OssUploadService接口QiniuOssUploadServiceImpl实现…...

跨国传输的常见问题与对应解决方案

在今天的全球化时代&#xff0c;跨国数据传输已经成为一个不可或缺的需求。不论是个人还是企业&#xff0c;都需要通过网络将文件或数据从一个国家传输到另一个国家&#xff0c;以实现信息共享、协作、备份等目的。然而&#xff0c;跨国数据传输并不是一项容易的任务&#xff0…...

Git(七).git 文件夹瘦身,GitLab 永久删除文件

目录 一、问题背景二、问题复现2.1 新建项目2.2 上传大文件2.3 上传结果 三、解决方案3.1 GitLab备份与还原1&#xff09;备份2&#xff09;还原 3.2 删除方式一&#xff1a;git filter-repo 命令【推荐】1&#xff09;安装2&#xff09;删除本地仓库文件3&#xff09;重新关联…...

多线程锁的升级原理是什么

在 Java 中&#xff0c;锁共有 4 种状态&#xff0c;级别从低到高依次为&#xff1a;无状态锁&#xff0c;偏向锁&#xff0c;轻量级锁和重量级锁状态&#xff0c;这几个状态会随着竞争情况逐渐升级。锁可以升级但不能降级。 多线程锁锁升级过程 如下图所示 多线程锁的升级过程…...

金山文档轻维表之删除所有行记录

目前脚本文档里面的只有删除行记录功能&#xff0c;但是需要指定ID值&#xff0c;不能实现批量删除&#xff0c;很多人反馈但是官方无回应&#xff0c;挺奇怪的 但是批量删除的需求我很需要&#xff0c;最后研究了一下&#xff0c;还是挺容易实现的 测试&#xff1a; 附上脚本…...

站坑站坑站坑站坑站坑

站坑站坑站坑站坑站坑站坑站坑...

在Vue中,你可以使用动态import()语法来动态加载组件

在Vue中&#xff0c;你可以使用动态import()语法来动态加载组件。动态导入允许你在需要时异步加载组件&#xff0c;这样可以提高应用程序的初始加载性能。 下面是一个使用动态导入加载组件的示例&#xff1a; <template> <div> <button click"loadComp…...

金蝶云星空表单插件获取日期控件判空处理(代码示例)

文章目录 金蝶云星空表单插件获取日期控件判空处理C#实现 金蝶云星空表单插件获取日期控件判空处理 C#实现 DateTime? deliveryDate (DateTime?)this.View.Model.GetValue("FApproveDate");//审核日期long leadtime 20;//天数if (!deliveryDate.IsNullOrEmpty()…...

通过xshell传输文件到服务器

一、user is not in the sudoers file. This incident will be reported. 参考链接&#xff1a; [已解决]user is not in the sudoers file. This incident will be reported.(简单不容易出错的方式)-CSDN博客 简单解释下就是&#xff1a; 0、你的root需要设置好密码 sudo …...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...