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

ArgoZhang發表於2020-12-01
bootBlazor元件

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

相關文章