前言

Table表格在后台管理应用中使用的是相当频繁的，因此找一个功能齐全的前端框架对于我们而言是非常必要的，因为封装完善的前端框架能够大大提升我们的工作对接效率。今天我们主要来讲解一下在.NET中使用BootstrapBlazor组件库的Table表格组件（本章使用的数据都是程序自动生成的模拟数据，不需要与数据库打交道）。Emu28资讯网——每日最新资讯28at.com

图片Emu28资讯网——每日最新资讯28at.com

BootstrapBlazor介绍

图片Emu28资讯网——每日最新资讯28at.com

• 使用文档：https://www.blazor.zone/introduction
• Gitee项目地址：https://gitee.com/LongbowEnterprise/BootstrapBlazor

BootstrapBlazor是一套基于 Bootstrap 和 Blazor 的企业级组件库，可以认为是 Bootstrap 项目的 Blazor 版实现。基于 Bootstrap 样式库精心打造，并且额外增加了 100 多种常用的组件，为您快速开发项目带来非一般的感觉（喜欢Bootstrap风格的同学推荐使用）。Emu28资讯网——每日最新资讯28at.com

.NET BootstrapBlazor UI组件库引入

BootstrapBlazor Table使用前提条件！Emu28资讯网——每日最新资讯28at.com

https://mp.weixin.qq.com/s/UIeKSqym8ibLRvDwra8awwEmu28资讯网——每日最新资讯28at.com

首先定义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>

图片Emu28资讯网——每日最新资讯28at.com

显示Table工具栏

<Table TItem="StudentViewModel" AutoGenerateColumns="true" Items="StudentInfoList" ShowToolbar="true"></Table>

图片Emu28资讯网——每日最新资讯28at.com

显示Table多选模式

<Table TItem="StudentViewModel" AutoGenerateColumns="true" Items="StudentInfoList" ShowToolbar="true" IsMultipleSelect="true"></Table>

图片Emu28资讯网——每日最新资讯28at.com

增加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>

图片Emu28资讯网——每日最新资讯28at.com

增加Table增、删、改、查、分页功能

<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="请输入姓名" 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>

Emu28资讯网——每日最新资讯28at.com