首頁  >  文章  >  web前端  >  淺析BootstrapBlazor中Table元件的自動產生列功能

淺析BootstrapBlazor中Table元件的自動產生列功能

青灯夜游
青灯夜游轉載
2022-02-28 11:01:363918瀏覽

下面Bootstrap欄位帶大家了解BootstrapBlazor中的Table元件,介紹一下Table元件的自動產生列功能,希望對大家有幫助!

淺析BootstrapBlazor中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

更多關於bootstrap的相關知識,可訪問:bootstrap教程

! ! ###

以上是淺析BootstrapBlazor中Table元件的自動產生列功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:cnblogs.com。如有侵權,請聯絡admin@php.cn刪除