Bootstrap Blazor 組件介紹 Table （三）列數據格式功能介紹

2020 年 12 月 3 日
筆記
Blazor, BootstrapBlazor

Bootstrap Blazor 是一套企業級 UI 組件庫，適配移動端支持各種主流瀏覽器，已經在多個交付項目中使用。通過本套組件可以大大縮短開發周期，節約開發成本。目前已經開發、封裝了 70 多個組件，歡迎有興趣的同學試用。

Gitee 開源地址為：//gitee.com/LongbowEnterprise/BootstrapBlazor
Github 開源地址為：//github.com/ArgoZhang/BootstrapBlazor

在線演示網站：//www.blazor.zone

前言

Table（表格）組件應該是做管理型網站開發的核心組件了，通過 Table 可以衍生出非常多的功能，上一章節對 Table 的自定義模板列進行了介紹，本章詳細介紹 Table 組件列的其他屬性以及用法。

列數據格式

在實際開發中有時候數據庫存儲的是時間，而現實的時候為了美化需要顯示為年月日，在 BootstrapBlazor 組件中自定義類模板功能非常簡單，代碼如下：

<TableColumn @bind-Field="@context.DateTime" Width="180" FormatString="yyyy-MM-dd" />

小技巧
通過設置 Width 寬度與 FormatString 來設置格式與寬度，達到完美效果

上例中是時間類型的字段，那要是其他類型的如何處理呢？

BootstrapBlazor 組件額外提供了一個回調委託 Formatter 函數，如下例中利用這個回調委託函數將數字類型的屬性格式化為帶兩位小數點格式

<TableColumn @bind-Field="@context.Count" Formatter="@IntFormatter" />

@code {
    protected Task<string> IntFormatter(object? d)
    {
        var data = (int?)d;
        return Task.FromResult(data?.ToString("0.00") ?? "");
    }      
}

是不是非常簡單？效果圖如下：

列數據對齊方式

列綁定時通過指定 Align 屬性設置對齊方式，代碼如下：

<TableColumn @bind-Field="@context.DateTime" Width="120" FormatString="yyyy-MM-dd" Align="Alignment.Center" />

搞定！！！效果圖如下：

根據屏幕寬度自適應顯示/隱藏列

想不想有一種 Table iPad 看的時候顯示 6 列，電腦看的時候顯示 10 列？是不是很神奇的需求？沒問題，BootstrapBlazor 的王者組件 Table 滿足您的變態需求，我們來看看代碼

<TableColumn @bind-Field="@context.Count" ShownWithBreakPoint="BreakPoint.Large" Width="60" />

眼見的小夥伴一下子就看到了一個屬性 ShownWithBreakPoint 這個屬性是一個枚舉類型的

None 未設置均顯示
Small 屏幕大於等於 576px 時顯示
Medium 屏幕大於等於 768px 時顯示
Large 屏幕大於等於 992px 時顯示
ExtraLarge 屏幕大於等於 1200px 時顯示

通過這個簡單的屬性是不是實現您的變態需求呢？就是這麼簡單！！！

特別注意

由於 BootstrapBlazor 的 Table 組件已經自動偵測了移動端，在移動端設備上使用 Table 組件時默認是無法獲得行列這種呈現方式的，需要顯式設置渲染模式為 Table RenderModel="TableRenderModel.Table"

自定義顯示/隱藏列

攻城獅又開始抱怨表格中列太多了，怎麼顯示都不好看。BootstrapBlazor 自定義顯示列功能拯救你，比如一共 10 列，但是主要的可能有 6 列默認顯示出來，其餘四列做到控制按鈕中，供使用者自行調出來，豈不美哉！

<TableColumn @bind-Field="@context.Count" Visible="false" />

什麼？就一個 Visible="false" 就搞定了？是的，就是這樣的簡單，通過設置 Table 組件的 ShowColumnList="true" 使表格工具欄中出現列控制按鈕就搞定啦。真的是灰常的簡單。

列拖動

列太窄了，能不能我自己拖動列寬啊？能！！！BootstrapBlazor 的王者組件 Table 肯定能啊，怎麼設置呢？

<Table TItem="BindItem"
       IsPagination="true" PageItemsSource="@PageItemsSource" AllowResizing="true"
       IsStriped="true" IsBordered="true"
       ShowToolbar="false" IsMultipleSelect="true" ShowExtendButtons="false"
       OnQueryAsync="@OnQueryAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" Width="120" FormatString="yyyy-MM-dd" />
        <TableColumn @bind-Field="@context.Name" Width="100" />
    </TableColumns>
</Table>

通過設置 AllowResizing="true" 就搞定啦

額外收穫

某列數據太多啦，折行也不好，能不能自動截取啊？拖動時自動展現更多的數據呢？請看效果如下

是不是非常的心動，如果做到這個效果呢？複雜嗎？非常的簡單，只需要設置 AllowResizing="true" 的同時，在地址列上設置 TextEllipsis 就搞定啦，ShowTips="true" 設置鼠標懸浮時顯示全部數據，是不是非常的貼心，請查看代碼如下

<Table TItem="BindItem" IsBordered="true" IsStriped="true" Items="@CellItems" AllowResizing="true">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" Width="180" Text="時間" />
        <TableColumn @bind-Field="@context.Name" Text="姓名" />
        <TableColumn @bind-Field="@context.Address" Text="地址" Width="200" TextEllipsis="true" />
        <TableColumn @bind-Field="@context.Education" />
        <TableColumn @bind-Field="@context.Count" />
        <TableColumn @bind-Field="@context.Complete">
            <Template Context="v">
                <Switch IsDisabled="true" Value="v.Value" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
            </Template>
        </TableColumn>
    </TableColumns>
</Table>

有興趣學習 Blazor 的請加 QQ 群 795206915

更多列相關技巧請查看 BootstrapBlaozr 演示，下一篇講解列數據格式介紹

Tags: Blazor BootstrapBlazor