AntDesignBlazor示例——分頁查詢

known發表於2023-12-16

本示例是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/

相關文章