原文鏈接：https://www.cnblogs.com/argozhang/p/14067391.html#4760067
Bootstrap Blazor 是一套企業級 UI 組件庫，適配移動端支持各種主流瀏覽器，已經在多個交付專案中使用，通過本套組件可以大大縮短開發周期，節約開發成本，目前已經開發、封裝了 70 多個組件，歡迎有興趣的同學試用，
Gitee 開源地址為：https://gitee.com/LongbowEnterprise/BootstrapBlazor
Github 開源地址為：https://github.com/ArgoZhang/BootstrapBlazor
在線演示網站：https://www.blazor.zone
Table 應該是做管理型網站開發的核心組件了，通過 Table 可以衍生出非常多的功能，由于這套組件幾乎沒有宣傳，導致知道的人不是很多，但是很多小伙伴都是使用了其他一些開源 blazor 專案后發現 Table 組件根本無法使用
- 加載資料太卡
- 功能缺失太多
那么從今天開始正式介紹一下性能爆炸，操作簡單的 BootstrapBlazor 組件庫中的最強王者組件 Table，由于功能實在是太多，僅示例目前網站中就有近 60 個各種實戰中需要的功能，再接下來的時間里我們一一介紹
自動生成列功能
使用 Table 組件時大多陣列件都是要求用戶輸入顯示那些列，這樣會在 razor 檔案中增加大量列相關資訊，如下所示
1 <TableColumn @bind-Field="@context.DateTime" Width="180" /> 2 <TableColumn @bind-Field="@context.Name" /> 3 <TableColumn @bind-Field="@context.Address" /> 4 <TableColumn @bind-Field="@context.Education" /> 5 <TableColumn @bind-Field="@context.Count" /> 6 <TableColumn @bind-Field="@context.Complete">
如果一個物體類屬性太多時，這里書寫起來就會篇幅非常長，BootstrapBlazor 組件庫的 Table 組件有一個屬性 AutoGenerateColumns ，當設定其值為 true 時，會根據系結模型的屬性進行自動生成列資訊，為開發人員節約了大量的代碼，先看示例
1 <Table TItem="BindItem" IsStriped="true" IsBordered="true" IsMultipleSelect="true" 2 ShowToolbar="true" ShowExtendButtons="true" AutoGenerateColumns="true" 3 OnQueryAsync="@OnEditQueryAsync" OnResetSearchAsync="@OnResetSearchAsync" 4 OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync"> 5 </Table>
怎么樣？通過這一行代碼就完成了表格的全自動生成，并且提供了增、刪、改、查、過濾、排序等等全部功能，效果圖如下
是不是有一些心動，這么少的代碼居然可以實作這么多功能？沒錯！用 BootstrapBlazor 組件庫的 Table 組件開發就是這么簡單，
劃重點
使用 Table 組件 UI 層面的基本操作均已經封裝到組件功能中，開發人員只需要將精力轉移到資料庫的操作上去，如例子中的
1 OnQueryAsync 資料查詢方法 2 OnSaveAsync 資料保存方法（內部自動判斷主鍵執行插入或者更新操作） 3 OnDeleteAsync 資料洗掉方法 （可自行進行真實洗掉或者標記洗掉操作） 4 OnResetSearchAsync 重置搜索方法
實作原理
Table 組件為泛型組件，通過 TItem 設定系結模型型別為 BindItem 物體類，在這個物體類中通過 AutoGenerateColumnAttribute 標簽對自動生成列規則進行設定，具體引數如下：
1 [AttributeUsage(AttributeTargets.Property)] 2 public class AutoGenerateColumnAttribute : Attribute, ITableColumn 3 { 4 /// <summary> 5 /// 獲得/設定 顯示順序 6 /// </summary> 7 public int Order { get; set; } 8 9 /// <summary> 10 /// 獲得/設定 是否忽略 默認為 false 不忽略 11 /// </summary> 12 public bool Ignore { get; set; } 13 14 /// <summary> 15 /// 獲得/設定 當前列是否可編輯 默認為 true 當設定為 false 時自動生成編輯 UI 不生成此列 16 /// </summary> 17 public bool Editable { get; set; } = true; 18 19 /// <summary> 20 /// 獲得/設定 當前列編輯時是否只讀 默認為 false 21 /// </summary> 22 public bool Readonly { get; set; } 23 24 /// <summary> 25 /// 獲得/設定 是否允許排序 默認為 false 26 /// </summary> 27 public bool Sortable { get; set; } 28 29 /// <summary> 30 /// 獲得/設定 是否為默認排序列 默認為 false 31 /// </summary> 32 public bool DefaultSort { get; set; } 33 34 /// <summary> 35 /// 獲得/設定 是否為默認排序規則 默認為 SortOrder.Unset 36 /// </summary> 37 public SortOrder DefaultSortOrder { get; set; } 38 39 /// <summary> 40 /// 獲得/設定 是否允許過濾資料 默認為 false 41 /// </summary> 42 public bool Filterable { get; set; } 43 44 /// <summary> 45 /// 獲得/設定 是否參與搜索 默認為 false 46 /// </summary> 47 public bool Searchable { get; set; } 48 49 /// <summary> 50 /// 獲得/設定 列寬 51 /// </summary> 52 public int? Width { get; set; } 53 54 /// <summary> 55 /// 獲得/設定 是否固定本列 默認 false 不固定 56 /// </summary> 57 public bool Fixed { get; set; } 58 59 /// <summary> 60 /// 獲得/設定 列是否顯示 默認為 true 可見的 61 /// </summary> 62 public bool Visible { get; set; } = true; 63 64 /// <summary> 65 /// 獲得/設定 本列是否允許換行 默認為 false 66 /// </summary> 67 public bool AllowTextWrap { get; set; } 68 69 /// <summary> 70 /// 獲得/設定 本列文本超出省略 默認為 false 71 /// </summary> 72 public bool TextEllipsis { get; set; } 73 74 /// <summary> 75 /// 獲得/設定 列 td 自定義樣式 默認為 null 未設定 76 /// </summary> 77 public string? CssClass { get; set; } 78 79 /// <summary> 80 /// 獲得/設定 顯示節點閾值 默認值 BreakPoint.None 未設定 81 /// </summary> 82 public BreakPoint ShownWithBreakPoint { get; set; } 83 84 /// <summary> 85 /// 獲得/設定 格式化字串 如時間型別設定 yyyy-MM-dd 86 /// </summary> 87 public string? FormatString { get; set; } 88 89 /// <summary> 90 /// 獲得/設定 文字對齊方式 默認為 Alignment.None 91 /// </summary> 92 public Alignment Align { get; set; } 93 94 /// <summary> 95 /// 獲得/設定 欄位滑鼠懸停提示 96 /// </summary> 97 public bool ShowTips { get; set; } 98 99 /// <summary> 100 /// 獲得/設定 列格式化回呼委托 101 /// </summary> 102 public Func<object?, Task<string>>? Formatter { get; set; } 103 104 /// <summary> 105 /// 獲得/設定 編輯模板 106 /// </summary> 107 public RenderFragment<object>? EditTemplate { get; set; } 108 109 /// <summary> 110 /// 獲得/設定 顯示模板 111 /// </summary> 112 public RenderFragment<object>? Template { get; set; } 113 114 /// <summary> 115 /// 獲得/設定 搜索模板 116 /// </summary> 117 public RenderFragment<object>? SearchTemplate { get; set; } 118 119 /// <summary> 120 /// 獲得/設定 過濾模板 121 /// </summary> 122 public RenderFragment? FilterTemplate { get; set; } 123 124 /// <summary> 125 /// 獲得/設定 列頭顯示文字未設定時顯示欄位名稱 126 /// </summary> 127 public string? Text { get; set; } 128 }
這里有大量可以限定的引數基本看注釋就知道啦，更多 檔案請查看在線演示檔案 https://www.blazor.zone/tables/column
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/233311.html
標籤：.NET Core