今天小編給大家分享一下BootstrapBlazor中Table組件的自動(dòng)生成列功能怎么用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)安溪免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了超過(guò)千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

Bootstrap Blazor 是一套企業(yè)級(jí) UI 組件庫(kù)，適配移動(dòng)端支持各種主流瀏覽器，已經(jīng)在多個(gè)交付項(xiàng)目中使用。通過(guò)本套組件可以大大縮短開(kāi)發(fā)周期，節(jié)約開(kāi)發(fā)成本。目前已經(jīng)開(kāi)發(fā)、封裝了 70 多個(gè)組件。

Table 應(yīng)該是做管理型網(wǎng)站開(kāi)發(fā)的核心組件了，通過(guò) Table 可以衍生出非常多的功能，由于這套組件幾乎沒(méi)有宣傳，導(dǎo)致知道的人不是很多，但是很多小伙伴都是使用了其他一些開(kāi)源 blazor 項(xiàng)目后發(fā)現(xiàn) Table 組件根本無(wú)法使用。

• 加載數(shù)據(jù)太卡

• 功能缺失太多

那么從今天開(kāi)始正式介紹一下性能爆炸，操作簡(jiǎn)單的 BootstrapBlazor 組件庫(kù)中的最強(qiáng)王者組件 Table，由于功能實(shí)在是太多，僅示例目前網(wǎng)站中就有近 60 個(gè)各種實(shí)戰(zhàn)中需要的功能，再接下來(lái)的時(shí)間里我們一一介紹

自動(dòng)生成列功能

使用 Table 組件時(shí)大多數(shù)組件都是要求用戶輸入顯示那些列，這樣會(huì)在 razor 文件中增加大量列相關(guān)信息，如下所示

<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">

如果一個(gè)實(shí)體類屬性太多時(shí)。這里書寫起來(lái)就會(huì)篇幅非常長(zhǎng)，BootstrapBlazor 組件庫(kù)的 Table 組件有一個(gè)屬性 AutoGenerateColumns ，當(dāng)設(shè)置其值為 true 時(shí)，會(huì)根據(jù)綁定模型的屬性進(jìn)行自動(dòng)生成列信息，為開(kāi)發(fā)人員節(jié)約了大量的代碼，先看示例

<Table TItem="BindItem" IsStriped="true" IsBordered="true" IsMultipleSelect="true"
            ShowToolbar="true" ShowExtendButtons="true" AutoGenerateColumns="true"
            OnQueryAsync="@OnEditQueryAsync" OnResetSearchAsync="@OnResetSearchAsync"
            OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
</Table>

怎么樣？通過(guò)這一行代碼就完成了表格的全自動(dòng)生成，并且提供了增、刪、改、查、過(guò)濾、排序等等全部功能。效果圖如下

是不是有一些心動(dòng)，這么少的代碼居然可以實(shí)現(xiàn)這么多功能？沒(méi)錯(cuò)！用 BootstrapBlazor 組件庫(kù)的 Table 組件開(kāi)發(fā)就是這么簡(jiǎn)單。

劃重點(diǎn)

使用 Table 組件 UI 層面的基本操作均已經(jīng)封裝到組件功能中，開(kāi)發(fā)人員只需要將精力轉(zhuǎn)移到數(shù)據(jù)庫(kù)的操作上去，如例子中的

• OnQueryAsync 數(shù)據(jù)查詢方法

• OnSaveAsync 數(shù)據(jù)保存方法（內(nèi)部自動(dòng)判斷主鍵執(zhí)行插入或者更新操作）

• OnDeleteAsync 數(shù)據(jù)刪除方法 （可自行進(jìn)行真實(shí)刪除或者標(biāo)記刪除操作）

• OnResetSearchAsync 重置搜索方法

實(shí)現(xiàn)原理

Table 組件為泛型組件，通過(guò) TItem 設(shè)定綁定模型類型為 BindItem 實(shí)體類，在這個(gè)實(shí)體類中通過(guò) AutoGenerateColumnAttribute 標(biāo)簽對(duì)自動(dòng)生成列規(guī)則進(jìn)行設(shè)置，具體參數(shù)如下：

[AttributeUsage(AttributeTargets.Property)]
public class AutoGenerateColumnAttribute : Attribute, ITableColumn
{
    /// <summary>
    /// 獲得/設(shè)置 顯示順序
    /// </summary>
    public int Order { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 是否忽略 默認(rèn)為 false 不忽略
    /// </summary>
    public bool Ignore { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 當(dāng)前列是否可編輯 默認(rèn)為 true 當(dāng)設(shè)置為 false 時(shí)自動(dòng)生成編輯 UI 不生成此列
    /// </summary>
    public bool Editable { get; set; } = true;

    /// <summary>
    /// 獲得/設(shè)置 當(dāng)前列編輯時(shí)是否只讀 默認(rèn)為 false
    /// </summary>
    public bool Readonly { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 是否允許排序 默認(rèn)為 false
    /// </summary>
    public bool Sortable { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 是否為默認(rèn)排序列 默認(rèn)為 false
    /// </summary>
    public bool DefaultSort { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 是否為默認(rèn)排序規(guī)則 默認(rèn)為 SortOrder.Unset
    /// </summary>
    public SortOrder DefaultSortOrder { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 是否允許過(guò)濾數(shù)據(jù) 默認(rèn)為 false
    /// </summary>
    public bool Filterable { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 是否參與搜索 默認(rèn)為 false
    /// </summary>
    public bool Searchable { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 列寬
    /// </summary>
    public int? Width { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 是否固定本列 默認(rèn) false 不固定
    /// </summary>
    public bool Fixed { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 列是否顯示 默認(rèn)為 true 可見(jiàn)的
    /// </summary>
    public bool Visible { get; set; } = true;

    /// <summary>
    /// 獲得/設(shè)置 本列是否允許換行 默認(rèn)為 false
    /// </summary>
    public bool AllowTextWrap { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 本列文本超出省略 默認(rèn)為 false
    /// </summary>
    public bool TextEllipsis { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 列 td 自定義樣式 默認(rèn)為 null 未設(shè)置
    /// </summary>
    public string? CssClass { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 顯示節(jié)點(diǎn)閾值 默認(rèn)值 BreakPoint.None 未設(shè)置
    /// </summary>
    public BreakPoint ShownWithBreakPoint { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 格式化字符串 如時(shí)間類型設(shè)置 yyyy-MM-dd
    /// </summary>
    public string? FormatString { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 文字對(duì)齊方式 默認(rèn)為 Alignment.None
    /// </summary>
    public Alignment Align { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 字段鼠標(biāo)懸停提示
    /// </summary>
    public bool ShowTips { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 列格式化回調(diào)委托
    /// </summary>
    public Func<object?, Task<string>>? Formatter { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 編輯模板
    /// </summary>
    public RenderFragment<object>? EditTemplate { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 顯示模板
    /// </summary>
    public RenderFragment<object>? Template { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 搜索模板
    /// </summary>
    public RenderFragment<object>? SearchTemplate { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 過(guò)濾模板
    /// </summary>
    public RenderFragment? FilterTemplate { get; set; }

    /// <summary>
    /// 獲得/設(shè)置 列頭顯示文字未設(shè)置時(shí)顯示字段名稱
    /// </summary>
    public string? Text { get; set; }
}

以上就是“BootstrapBlazor中Table組件的自動(dòng)生成列功能怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文名稱：BootstrapBlazor中Table組件的自動(dòng)生成列功能怎么用
文章起源：http://sd-ha.com/article26/gdddjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、做網(wǎng)站、網(wǎng)站營(yíng)銷、軟件開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)公司、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)