Bootstrap Blazor 元件介紹 Table （三）列資料格式功能介紹

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

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

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

線上演示網站：https://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 演示，下一篇講解列資料格式介紹

相關文章