前言
Table表格在后台管理应用中使用的是相当频繁的，因此找一个功能齐全的前端框架对于我们而言是非常必要的，因为封装完善的前端框架能够大大提升我们的工作对接效率。今天我们主要来讲解一下在.NET中使用BootstrapBlazor组件库的Table表格组件（本章使用的数据都是程序自动生成的模拟数据，不需要与数据库打交道）。
BootstrapBlazor介绍
- 使用文档：https://www.blazor.zone/introduction
- Gitee项目地址：https://gitee.com/LongbowEnterprise/BootstrapBlazor
BootstrapBlazor是一套基于 Bootstrap 和 Blazor 的企业级组件库，可以认为是 Bootstrap 项目的 Blazor 版实现。基于 Bootstrap 样式库精心打造，并且额外增加了 100 多种常用的组件，为您快速开发项目带来非一般的感觉（喜欢Bootstrap风格的同学推荐使用）。
.NET BootstrapBlazor UI组件库引入
BootstrapBlazor Table使用前提条件！
https://mp.weixin.qq.com/s/UIeKSqym8ibLRvDwra8aww
首先定义StudentViewModel
public class StudentViewModel { /// <summary> /// StudentID /// </summary> public int StudentID { get; set; } /// <summary> /// 班级名称 /// </summary> public string ClassName { get; set; } /// <summary> /// 学生姓名 /// </summary> public string Name { get; set; } /// <summary> /// 学生年龄 /// </summary> public int Age { get; set; } /// <summary> /// 学生性别 /// </summary> public string Gender { get; set; } }
.NET后台模拟数据和增删改查方法封装
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> /// 模拟数据库用户信息生成 /// </summary> /// <returns></returns> public static List<StudentViewModel> GenerateUserInfos() { return new List<StudentViewModel>(Enumerable.Range(1, 200).Select(i => new StudentViewModel() { StudentID = i, ClassName = $"时光 {i} 班", Name = GenerateRandomName(), Age = random.Next(20, 50), Gender = GenerateRandomGender() })); } /// <summary> /// 生成随机性别 /// </summary> /// <returns></returns> public static string GenerateRandomGender() { string[] genders = { "男", "女" }; return genders[random.Next(genders.Length)]; } /// <summary> /// 生成随机姓名 /// </summary> /// <returns></returns> public static string GenerateRandomName() { string[] surnames = { "张", "王", "李", "赵", "刘" }; string[] names = { "明", "红", "强", "丽", "军" }; string surname = surnames[random.Next(surnames.Length)]; string name = names[random.Next(names.Length)]; return surname + name; } /// <summary> /// 数据查询 /// </summary> /// <param name="options">options</param> /// <returns></returns> private Task<QueryData<StudentViewModel>> OnQueryAsync(QueryPageOptions options) { List<StudentViewModel> studentInfoData = StudentInfoList; // 数据模糊过滤筛选 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> /// 模拟数据增加和修改操作 /// </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> /// 数据删除 /// </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="请输入姓名" maxlength="50" ShowLabel="true" DisplayText="姓名" /> </div> <div class="col-12 col-sm-6"> <BootstrapInput @bind-Value="@context.Gender" PlaceHolder="请输入性别" maxlength="500" ShowLabel="true" DisplayText="性别" /> </div> </div> </GroupBox> </SearchTemplate> </Table>
增加Table增、删、改、查、分页功能
<Table TItem="StudentViewModel" AutoGenerateColumns="true" ShowToolbar="true" IsMultipleSelect="true" OnSaveAsync="@OnSaveAsync" OnQueryAsync="@OnQueryAsync" OnDeleteAsync="@OnDeleteAsync" IsStriped="true" IsBordered="true" ShowSearch="true" IsPagination="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="请输入姓名" maxlength="50" ShowLabel="true" DisplayText="姓名" /> </div> <div class="col-12 col-sm-6"> <BootstrapInput @bind-Value="@context.Gender" PlaceHolder="请输入性别" maxlength="500" ShowLabel="true" DisplayText="性别" /> </div> </div> </GroupBox> </SearchTemplate> </Table>
