前言

Table表格在后臺管理應用中使用的是相當頻繁的，因此找一個功能齊全的前端框架對于我們而言是非常必要的，因為封裝完善的前端框架能夠大大提升我們的工作對接效率。今天我們主要來講解一下在.NET中使用BootstrapBlazor組件庫的Table表格組件（本章使用的數(shù)據(jù)都是程序自動生成的模擬數(shù)據(jù)，不需要與數(shù)據(jù)庫打交道）。D3S28資訊網(wǎng)——每日最新資訊28at.com

圖片D3S28資訊網(wǎng)——每日最新資訊28at.com

BootstrapBlazor介紹

圖片D3S28資訊網(wǎng)——每日最新資訊28at.com

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

BootstrapBlazor是一套基于 Bootstrap 和 Blazor 的企業(yè)級組件庫，可以認為是 Bootstrap 項目的 Blazor 版實現(xiàn)。基于 Bootstrap 樣式庫精心打造，并且額外增加了 100 多種常用的組件，為您快速開發(fā)項目帶來非一般的感覺（喜歡Bootstrap風格的同學推薦使用）。D3S28資訊網(wǎng)——每日最新資訊28at.com

.NET BootstrapBlazor UI組件庫引入

BootstrapBlazor Table使用前提條件！D3S28資訊網(wǎng)——每日最新資訊28at.com

https://mp.weixin.qq.com/s/UIeKSqym8ibLRvDwra8awwD3S28資訊網(wǎng)——每日最新資訊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后臺模擬數(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ù)庫用戶信息生成        /// </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>        /// 數(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>

圖片D3S28資訊網(wǎng)——每日最新資訊28at.com

顯示Table工具欄

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

圖片D3S28資訊網(wǎng)——每日最新資訊28at.com

顯示Table多選模式

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

圖片D3S28資訊網(wǎng)——每日最新資訊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>

圖片D3S28資訊網(wǎng)——每日最新資訊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>

D3S28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-74192-0.html.NET中使用BootstrapBlazor組件庫Table實操篇

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 100000行級別數(shù)據(jù)的 Excel 導入優(yōu)化之路

下一篇： Rust異步編程的可觀察調(diào)試工具：Await-Tree