.NET中使用BootstrapBlazor組件庫(kù)Table實(shí)操篇
作者：大姚
今天我們主要來講解一下在.NET中使用BootstrapBlazor組件庫(kù)的Table表格組件（本章使用的數(shù)據(jù)都是程序自動(dòng)生成的模擬數(shù)據(jù)，不需要與數(shù)據(jù)庫(kù)打交道）。
前言
Table表格在后臺(tái)管理應(yīng)用中使用的是相當(dāng)頻繁的，因此找一個(gè)功能齊全的前端框架對(duì)于我們而言是非常必要的，因?yàn)榉庋b完善的前端框架能夠大大提升我們的工作對(duì)接效率。今天我們主要來講解一下在.NET中使用BootstrapBlazor組件庫(kù)的Table表格組件（本章使用的數(shù)據(jù)都是程序自動(dòng)生成的模擬數(shù)據(jù)，不需要與數(shù)據(jù)庫(kù)打交道）。
圖片
BootstrapBlazor介紹
圖片
- 使用文檔：https://www.blazor.zone/introduction
- Gitee項(xiàng)目地址：https://gitee.com/LongbowEnterprise/BootstrapBlazor
BootstrapBlazor是一套基于 Bootstrap 和 Blazor 的企業(yè)級(jí)組件庫(kù)，可以認(rèn)為是 Bootstrap 項(xiàng)目的 Blazor 版實(shí)現(xiàn)?；?Bootstrap 樣式庫(kù)精心打造，并且額外增加了 100 多種常用的組件，為您快速開發(fā)項(xiàng)目帶來非一般的感覺（喜歡Bootstrap風(fēng)格的同學(xué)推薦使用）。
.NET BootstrapBlazor UI組件庫(kù)引入
BootstrapBlazor Table使用前提條件！
https://mp.weixin.qq.com/s/UIeKSqym8ibLRvDwra8aww
首先定義StudentViewModel
public class StudentViewModel
{
/// <summary>
/// StudentID
/// </summary>
public int StudentID { get; set; }
/// <summary>
/// 班級(jí)名稱
/// </summary>
public string ClassName { get; set; }
/// <summary>
/// 學(xué)生姓名
/// </summary>
public string Name { get; set; }
/// <summary>
/// 學(xué)生年齡
/// </summary>
public int Age { get; set; }
/// <summary>
/// 學(xué)生性別
/// </summary>
public string Gender { get; set; }
}.NET后臺(tái)模擬數(shù)據(jù)和增刪改查方法封裝
using BootstrapBlazor.Components;
using WebUI.Model;
namespace WebUI.Pages
{
public partial class StudentExample
{
private static readonly Random random = new Random();
public static List<StudentViewModel>? StudentInfoList;
public StudentExample()
{
StudentInfoList = GenerateUserInfos();
}
/// <summary>
/// 模擬數(shù)據(jù)庫(kù)用戶信息生成
/// </summary>
/// <returns></returns>
public static List<StudentViewModel> GenerateUserInfos()
{
return new List<StudentViewModel>(Enumerable.Range(1, 200).Select(i => new StudentViewModel()
{
StudentID = i,
ClassName = $"時(shí)光 {i} 班",
Name = GenerateRandomName(),
Age = random.Next(20, 50),
Gender = GenerateRandomGender()
}));
}
/// <summary>
/// 生成隨機(jī)性別
/// </summary>
/// <returns></returns>
public static string GenerateRandomGender()
{
string[] genders = { "男", "女" };
return genders[random.Next(genders.Length)];
}
/// <summary>
/// 生成隨機(jī)姓名
/// </summary>
/// <returns></returns>
public static string GenerateRandomName()
{
string[] surnames = { "張", "王", "李", "趙", "劉" };
string[] names = { "明", "紅", "強(qiáng)", "麗", "軍" };
string surname = surnames[random.Next(surnames.Length)];
string name = names[random.Next(names.Length)];
return surname + name;
}
/// <summary>
/// 數(shù)據(jù)查詢
/// </summary>
/// <param name="options">options</param>
/// <returns></returns>
private Task<QueryData<StudentViewModel>> OnQueryAsync(QueryPageOptions options)
{
List<StudentViewModel> studentInfoData = StudentInfoList;
// 數(shù)據(jù)模糊過濾篩選
if (!string.IsNullOrWhiteSpace(options.SearchText))
{
studentInfoData = studentInfoData.Where(x => x.Name.Contains(options.SearchText)).ToList();
}
return Task.FromResult(new QueryData<StudentViewModel>()
{
Items = studentInfoData.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList(),
TotalCount = studentInfoData.Count()
});
}
/// <summary>
/// 模擬數(shù)據(jù)增加和修改操作
/// </summary>
/// <param name="studentInfo">studentInfo</param>
/// <param name="changedType">changedType</param>
/// <returns></returns>
public Task<bool> OnSaveAsync(StudentViewModel studentInfo, ItemChangedType changedType)
{
if (changedType.ToString() == "Update")
{
var queryInfo = StudentInfoList.FirstOrDefault(x => x.StudentID == studentInfo.StudentID);
if (queryInfo != null)
{
queryInfo.Age = studentInfo.Age;
queryInfo.ClassName = studentInfo.ClassName;
queryInfo.Name = studentInfo.Name;
queryInfo.Gender = studentInfo.Gender;
}
}
else if (changedType.ToString() == "Add")
{
StudentInfoList.Add(studentInfo);
}
return Task.FromResult(true);
}
/// <summary>
/// 數(shù)據(jù)刪除
/// </summary>
/// <param name="items">items</param>
/// <returns></returns>
private Task<bool> OnDeleteAsync(IEnumerable<StudentViewModel> items)
{
items.ToList().ForEach(i => StudentInfoList.Remove(i));
return Task.FromResult(true);
}
}
}一行代碼快速生成Table表格
<Table TItem="StudentViewModel" AutoGenerateColumns="true" Items="StudentInfoList"></Table>
圖片
顯示Table工具欄
<Table TItem="StudentViewModel" AutoGenerateColumns="true" Items="StudentInfoList" ShowToolbar="true"></Table>
圖片
顯示Table多選模式
<Table TItem="StudentViewModel" AutoGenerateColumns="true" Items="StudentInfoList" ShowToolbar="true" IsMultipleSelect="true"></Table>
圖片
增加Table搜索功能
<Table TItem="StudentViewModel" AutoGenerateColumns="true" Items="StudentInfoList" ShowToolbar="true" IsMultipleSelect="true" ShowSearch="true">
<SearchTemplate>
<GroupBox Title="搜索條件">
<div class="row g-3 form-inline">
<div class="col-12 col-sm-6">
<BootstrapInput @bind-Value="@context.Name" PlaceHolder="請(qǐng)輸入姓名" maxlength="50" ShowLabel="true" DisplayText="姓名" />
</div>
<div class="col-12 col-sm-6">
<BootstrapInput @bind-Value="@context.Gender" PlaceHolder="請(qǐng)輸入性別" maxlength="500" ShowLabel="true" DisplayText="性別" />
</div>
</div>
</GroupBox>
</SearchTemplate>
</Table>
圖片
增加Table增、刪、改、查、分頁(yè)功能
<Table TItem="StudentViewModel"
AutoGenerateColumns="true"
ShowToolbar="true"
IsMultipleSelect="true"
OnSaveAsync="@OnSaveAsync"
OnQueryAsync="@OnQueryAsync"
OnDeleteAsync="@OnDeleteAsync"
IsStriped="true"
IsBordered="true"
ShowSearch="true"
IsPaginatinotallow="true"
ShowSearchText="true">
<TableColumns>
<TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.StudentID" />
<TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Name" />
<TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.ClassName" />
<TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Gender" />
</TableColumns>
<SearchTemplate>
<GroupBox Title="搜索條件">
<div class="row g-3 form-inline">
<div class="col-12 col-sm-6">
<BootstrapInput @bind-Value="@context.Name" PlaceHolder="請(qǐng)輸入姓名" maxlength="50" ShowLabel="true" DisplayText="姓名" />
</div>
<div class="col-12 col-sm-6">
<BootstrapInput @bind-Value="@context.Gender" PlaceHolder="請(qǐng)輸入性別" maxlength="500" ShowLabel="true" DisplayText="性別" />
</div>
</div>
</GroupBox>
</SearchTemplate>
</Table>責(zé)任編輯：武曉燕
來源：
追逐時(shí)光者
