貴州網站建設公司Bootstrap Blazor 組件介紹 Table （一）自動生成列功能介紹
Bootstrap Blazor 是組自動一套企業級 UI 組件庫，適配移動端支持各種主流瀏覽器，紹T生成紹已經在多個交付項目中使用。列功通過本套組件可以大大縮短開發周期，組自動節約開發成本。紹T生成紹目前已經開發、列功封裝了 70 多個組件，組自動歡迎有興趣的紹T生成紹同學試用。
Gitee 開源地址為：https://gitee.com/LongbowEnterprise/BootstrapBlazor
Github 開源地址為：https://github.com/ArgoZhang/BootstrapBlazor
在線演示網站：https://www.blazor.zone
Table應該是列功做管理型網站開發的核心組件了，通過 Table可以衍生出非常多的組自動功能，由于這套組件幾乎沒有宣傳，紹T生成紹導致知道的列功人不是很多，但是組自動很多小伙伴都是使用了其他一些開源 blazor 項目后發現 Table組件根本無法使用
- 加載數據太卡
- 功能缺失太多
那么從今天開始正式介紹一下性能爆炸，操作簡單的紹T生成紹 BootstrapBlazor組件庫中的最強王者組件 Table，由于功能實在是列功太多，僅示例目前網站中就有近 60 個各種實戰中需要的功能，再接下來的時間里我們一一介紹
自動生成列功能
使用 Table組件時大多數組件都是要求用戶輸入顯示那些列，這樣會在 razor文件中增加大量列相關信息，如下所示
<TableColumn @bind-Field="@context.DateTime" Width="180" /><TableColumn @bind-Field="@context.Name" /><TableColumn @bind-Field="@context.Address" /><TableColumn @bind-Field="@context.Education" /><TableColumn @bind-Field="@context.Count" /><TableColumn @bind-Field="@context.Complete">如果一個實體類屬性太多時。這里書寫起來就會篇幅非常長，BootstrapBlazor組件庫的 Table組件有一個屬性 AutoGenerateColumns ，當設置其值為 true時，會根據綁定模型的屬性進行自動生成列信息，為開發人員節約了大量的代碼，先看示例
<Table TItem="BindItem" IsStriped="true" IsBordered="true" IsMultipleSelect="true" ShowToolbar="true" ShowExtendButtons="true" AutoGenerateColumns="true" OnQueryAsync="@OnEditQueryAsync" OnResetSearchAsync="@OnResetSearchAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync"></Table>怎么樣？通過這一行代碼就完成了表格的全自動生成，并且提供了增、刪、改、查、過濾、排序等等全部功能。效果圖如下
是不是有一些心動，這么少的代碼居然可以實現這么多功能？沒錯！用 BootstrapBlazor組件庫的 Table組件開發就是這么簡單。
劃重點
使用 Table組件 UI 層面的基本操作均已經封裝到組件功能中，開發人員只需要將精力轉移到數據庫的操作上去，如例子中的
OnQueryAsync數據查詢方法OnSaveAsync數據保存方法（內部自動判斷主鍵執行插入或者更新操作）OnDeleteAsync數據刪除方法 （可自行進行真實刪除或者標記刪除操作）OnResetSearchAsync重置搜索方法
實現原理
Table組件為泛型組件，通過 TItem設定綁定模型類型為 BindItem實體類，在這個實體類中通過 AutoGenerateColumnAttribute標簽對自動生成列規則進行設置，具體參數如下：
[AttributeUsage(AttributeTargets.Property)]public class AutoGenerateColumnAttribute : Attribute, ITableColumn{ /// <summary> /// 獲得/設置 顯示順序 /// </summary> public int Order { get; set; } /// <summary> /// 獲得/設置 是否忽略 默認為 false 不忽略 /// </summary> public bool Ignore { get; set; } /// <summary> /// 獲得/設置 當前列是否可編輯 默認為 true 當設置為 false 時自動生成編輯 UI 不生成此列 /// </summary> public bool Editable { get; set; } = true; /// <summary> /// 獲得/設置 當前列編輯時是否只讀 默認為 false /// </summary> public bool Readonly { get; set; } /// <summary> /// 獲得/設置 是否允許排序 默認為 false /// </summary> public bool Sortable { get; set; } /// <summary> /// 獲得/設置 是否為默認排序列 默認為 false /// </summary> public bool DefaultSort { get; set; } /// <summary> /// 獲得/設置 是否為默認排序規則 默認為 SortOrder.Unset /// </summary> public SortOrder DefaultSortOrder { get; set; } /// <summary> /// 獲得/設置 是否允許過濾數據 默認為 false /// </summary> public bool Filterable { get; set; } /// <summary> /// 獲得/設置 是否參與搜索 默認為 false /// </summary> public bool Searchable { get; set; } /// <summary> /// 獲得/設置 列寬 /// </summary> public int? Width { get; set; } /// <summary> /// 獲得/設置 是否固定本列 默認 false 不固定 /// </summary> public bool Fixed { get; set; } /// <summary> /// 獲得/設置 列是否顯示 默認為 true 可見的 /// </summary> public bool Visible { get; set; } = true; /// <summary> /// 獲得/設置 本列是否允許換行 默認為 false /// </summary> public bool AllowTextWrap { get; set; } /// <summary> /// 獲得/設置 本列文本超出省略 默認為 false /// </summary> public bool TextEllipsis { get; set; } /// <summary> /// 獲得/設置 列 td 自定義樣式 默認為 null 未設置 /// </summary> public string? CssClass { get; set; } /// <summary> /// 獲得/設置 顯示節點閾值 默認值 BreakPoint.None 未設置 /// </summary> public BreakPoint ShownWithBreakPoint { get; set; } /// <summary> /// 獲得/設置 格式化字符串 如時間類型設置 yyyy-MM-dd /// </summary> public string? FormatString { get; set; } /// <summary> /// 獲得/設置 文字對齊方式 默認為 Alignment.None /// </summary> public Alignment Align { get; set; } /// <summary> /// 獲得/設置 字段鼠標懸停提示 /// </summary> public bool ShowTips { get; set; } /// <summary> /// 獲得/設置 列格式化回調委托 /// </summary> public Func<object?, Task<string>>? Formatter { get; set; } /// <summary> /// 獲得/設置 編輯模板 /// </summary> public RenderFragment<object>? EditTemplate { get; set; } /// <summary> /// 獲得/設置 顯示模板 /// </summary> public RenderFragment<object>? Template { get; set; } /// <summary> /// 獲得/設置 搜索模板 /// </summary> public RenderFragment<object>? SearchTemplate { get; set; } /// <summary> /// 獲得/設置 過濾模板 /// </summary> public RenderFragment? FilterTemplate { get; set; } /// <summary> /// 獲得/設置 列頭顯示文字未設置時顯示字段名稱 /// </summary> public string? Text { get; set; }}這里有大量可以限定的參數基本看注釋就知道啦。更多 文檔請查看在線演示文檔 https://www.blazor.zone/tables/column
公眾號連接地址 https://mp.weixin.qq.com/s/d2bA_DyalnskZQFiOHApkA
作者：ArgoZhang
來源鏈接：https://www.cnblogs.com/argozhang/p/14067391.html
