Bootstrap Blazor 組件介紹 Table （一）自動生成列功能介紹

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 文件中增長大量列相關信息，以下所示

<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