首页 > 其他分享 >AntDesignBlazor示例——分页查询

AntDesignBlazor示例——分页查询

时间:2023-12-16 17:45:34浏览次数:37  
标签:类库 分页 示例 前端 查询 AntDesignBlazor 添加

本示例是AntDesign Blazor的入门示例,在学习的同时分享出来,以供新手参考。

示例代码仓库:https://gitee.com/known/BlazorDemo

1. 学习目标

  • 分页查询框架
  • 天气数据分页功能
  • 表格自定义分页

2. 创建分页查询框架

Table组件分页默认为前端分页,即所有数据一次性加载到前端进行分页;在实际项目中,大多数都是后端分页,即根据前端提供的分页参数只查询一页数据返回给前端显示。下面我们搭建一个简易的分页查询框架:

1)添加新类库项目,命名为BlazorDemoCore,为什么要新建类库项目?

  • 一是查询框架是通用的,所有项目都可以使用
  • 二是将框架封装在类库中,便于其他项目引用
  • 三是框架代码与项目代码隔离,避免被篡改

image

2)查询条件类

在类库BlazorDemoCore中添加查询条件类PagingCriteria,该类用于前端封装查询条件参数传递给后端,后端根据该类信息从数据库中查询分页数据给前端显示。

image

3)查询结果类

在类库BlazorDemoCore中添加查询结果类PagingResult,该类用于后端将查询结果封装起来传递给前端,前端根据该类信息分页显示。该类提供泛型,泛型类型为每条数据的类型。

image

3. 修改天气数据后端查询

1)首先在AntDesignDemo项目中引用框架项目BlazorDemoCore,右击项目添加项目引用,引用后项目文件内容如下:

image

2)双击WeatherService类文件,修改天气数据查询方法,方法参数改成查询条件,返回值改成查询结果。

image

4. 修改天气数据前端分页功能

1)双击_Imports.razor文件添加框架命名空间。

image

2)双击Weather.razor文件,删除如下几行代码。

image

3)修改Table组件属性,绑定分页参数和查询结果,添加分页事件OnChange的同时必须添加TItem属性。

image

4)添加表格分页查询事件,将页码和每页大小赋给查询条件,修改查询方法和默认查询条件。

image

5)修改完成,点击运行按钮查看运行效果。

image

5. 表格分页自定义样式

Table组件分页默认显示在左下角,下面介绍如何显示在有下角,并且显示总条数,改变每页大小和快速跳转某页。

1)显示在右下角,在Table组件上添加属性PaginationPosition="bottomRight"即可,运行效果如下

image

2)若要显示总条数及切换每页大小和快速跳转,则要隐藏默认分页,使用分页模板来实现。

  • PropertyColumn移到ChildContent
  • 添加PaginationTemplate,在其内部添加Pagination组件
  • 显示总条数,添加ShowTotal属性
  • 显示切换每页大小,添加ShowSizeChanger属性
  • 显示快速跳转页码,添加ShowQuickJumper属性

image

3)修改完成,点击运行按钮查看运行效果。

image

6. 视频

https://www.bilibili.com/video/BV19b4y157bk/

<iframe allowfullscreen="true" border="0" frameborder="no" framespacing="0" scrolling="no" src="//player.bilibili.com/player.html?bvid=BV19b4y157bk&page=1"> </iframe>

标签:类库,分页,示例,前端,查询,AntDesignBlazor,添加
From: https://www.cnblogs.com/known/p/17871652.html

相关文章

  • C++ Qt开发:Tab与Tree组件实现分页菜单
    Qt是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍tabWidget选择夹组件与TreeWidget树形选择组件,的常用方法及灵活运用。1.1TabWidgetQTabWidget......
  • Golang io.Pipe()函数及示例
    https://geek-docs.com/go-tutorials/go-examples/g_io-pipe-function-in-golang-with-examples.html 在Go语言中,io包提供了基本的I/O原语接口,其主要工作是封装这些原语的正在进行的实现。Go语言中的Pipe()函数用于创建并发的内存管道,在将期望io.Reader的代码与期望io.Writer......
  • net8获取泛微token以及访问api示例
    工作中涉及到调用泛微的场景,官方的示例又臭又长,抽空用NET8简化了写法,为了简化http访问,用了Flurl.Http这个库。在座各位大佬,我们直接就看代码了 usingSystem.Security.Cryptography;usingSystem.Text.Json;usingFlurl.Http;//请按照官方内容做好初始化工作https://e-c......
  • 【C++】异常处理 ④ ( 异常接口声明 | 异常接口语法 | 抛出一种类型的异常 | 抛出多种
    文章目录一、异常接口声明1、异常接口引入2、异常接口语法3、抛出一种类型的异常4、抛出多种类型的异常5、抛出任何类型异常-不声明异常接口/声明throw(...)6、不能抛出任何类型异常-声明throw()7、抛出异常类型错误博客总结://1.不会抛出异常voidfun()throw();......
  • Python多线程计算的方法及示例代码
    Python是一种非常流行的编程语言,支持多种并发编程的方式,其中包括多线程。多线程允许程序同时执行多个任务,从而提高了程序的运行效率。下面将介绍Python中多线程计算的几种常见方法,并给出具体的示例代码。方法一:使用标准库threadingPython标准库中提供了threading模块,通过创建Thread......
  • C# lock示例
    这两天项目加了个需求,需要给PLC发心跳信号我又不想在原来的循环中加,所以想着再弄个timer来定时发信号。只是这样会有一个问题,就是冲突。两个线程之间,有可能同时与plc发生通讯,引起数据混乱。privatevoidbutton1_Click(objectsender,EventArgse){......
  • laravel php 50W数据导出excel 分批分页导出
    文章目录需求问题解决需求导出50W左右的数据导excel表问题使用phpexcel等插件,碰到数据量大很慢,可能能花半个小时以上数据量大查询慢内存不足执行超时解决使用原生csv导出设置脚本超时和内存,进行加大内存,不限制超时时间进行分页查询publicfunctionbp_out(R......
  • 【Python爬虫】Scrapy框架处理分页爬取+cookie登录_17k小说网
    简介本文主要讲常规分页爬取与利用Scrapy框架怎么快捷的爬取分页的数据以及cookie登录,案例网站时17k小说网,url是https://www.17k.com/常规分页爬取Scrapy框架分页爬取cookie登录分页常规分页爬取常规分页爬取,直接观察页面数据,一共有多少页数据,就for循环多少次classXiao......
  • 海外短劇app開發代碼示例
    隨著互聯網的普及和移動互聯網的發展,短劇app作為一種新的文化消費管道,正逐漸受到全球消費者的青睞。我將從市場需求、內容創作、用戶習慣等方面探討海外短劇app的開發趨勢。市場需求隨著海外用戶對於高品質文化產品的需求不斷增長,短劇app市場也迎來了新的發展機遇。......
  • springboot+VUE——mybatis分页和Element Plus的分页组件实践
    分页只有基础的分页功能,跳转和动态选择每页展示多少条数据的功能可以参考ElementPlus的分页组件自行配置并且传入相应的方法即可!<scriptlang="ts"setup>/***分页变量数据*/constpagination=ref({ current_page:1, // 当前页码,此处默认为第一页 total_data:0......