原文鏈接：https://www.cnblogs.com/argozhang/p/14081223.html
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 組件中自定義類模板功能非常簡單，代碼如下：
1 <TableColumn @bind-Field="@context.DateTime" Width="180" FormatString="yyyy-MM-dd" />
小技巧
通過設定 Width 寬度與 FormatString 來設定格式與寬度，達到完美效果
上例中是時間型別的欄位，那要是其他型別的如何處理呢？
BootstrapBlazor 組件額外提供了一個回呼委托 Formatter 函式，如下例中利用這個回呼委托函式將數字型別的屬性格式化為帶兩位小數點格式
1 <TableColumn @bind-Field="@context.Count" Formatter="@IntFormatter" /> 2 3 @code { 4 protected Task<string> IntFormatter(object? d) 5 { 6 var data = https://www.cnblogs.com/ysmc/archive/2020/12/12/(int?)d; 7 return Task.FromResult(data?.ToString("0.00") ?? ""); 8 } 9 }
是不是非常簡單？效果圖如下：
列資料對齊方式
列系結時通過指定 Align 屬性設定對齊方式，代碼如下：
1 <TableColumn @bind-Field="@context.DateTime" Width="120" FormatString="yyyy-MM-dd" Align="Alignment.Center" />
搞定！！！效果圖如下：
根據螢屏寬度自適應顯示/隱藏列
想不想有一種 Table iPad 看的時候顯示 6 列，電腦看的時候顯示 10 列？是不是很神奇的需求？沒問題，BootstrapBlazor 的王者組件 Table 滿足您的變態需求，我們來看看代碼
1 <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 列默認顯示出來，其余四列做到控制按鈕中，供使用者自行調出來，豈不美哉！
1 <TableColumn @bind-Field="@context.Count" Visible="false" />
什么？就一個 Visible="false" 就搞定了？是的，就是這樣的簡單，通過設定 Table 組件的 ShowColumnList="true" 使表格工具列中出現列控制按鈕就搞定啦，真的是灰常的簡單，
列拖動
列太窄了，能不能我自己拖動列寬啊？能！！！BootstrapBlazor 的王者組件 Table 肯定能啊，怎么設定呢？
1 <Table TItem="BindItem" 2 IsPagination="true" PageItemsSource="@PageItemsSource" AllowResizing="true" 3 IsStriped="true" IsBordered="true" 4 ShowToolbar="false" IsMultipleSelect="true" ShowExtendButtons="false" 5 OnQueryAsync="@OnQueryAsync"> 6 <TableColumns> 7 <TableColumn @bind-Field="@context.DateTime" Width="120" FormatString="yyyy-MM-dd" /> 8 <TableColumn @bind-Field="@context.Name" Width="100" /> 9 </TableColumns> 10 </Table>
通過設定 AllowResizing="true" 就搞定啦
額外識訓
某列資料太多啦，折行也不好，能不能自動截取啊？拖動時自動展現更多的資料呢？請看效果如下
是不是非常的心動，如果做到這個效果呢？復雜嗎？非常的簡單，只需要設定 AllowResizing="true" 的同時，在地址列上設定 TextEllipsis 就搞定啦，ShowTips="true" 設定滑鼠懸浮時顯示全部資料，是不是非常的貼心 ，請查看代碼如下
1 <Table TItem="BindItem" IsBordered="true" IsStriped="true" Items="@CellItems" AllowResizing="true"> 2 <TableColumns> 3 <TableColumn @bind-Field="@context.DateTime" Width="180" Text="時間" /> 4 <TableColumn @bind-Field="@context.Name" Text="姓名" /> 5 <TableColumn @bind-Field="@context.Address" Text="地址" Width="200" TextEllipsis="true" /> 6 <TableColumn @bind-Field="@context.Education" /> 7 <TableColumn @bind-Field="@context.Count" /> 8 <TableColumn @bind-Field="@context.Complete"> 9 <Template Context="v"> 10 <Switch IsDisabled="true" Value=https://www.cnblogs.com/ysmc/archive/2020/12/12/"v.Value" ShowInnerText="true" OnInnerText="是" OffInnerText="否" /> 11 </Template> 12 </TableColumn> 13 </TableColumns> 14 </Table>
有興趣學習 Blazor 的請加 QQ 群 795206915
更多列相關技巧請查看 BootstrapBlaozr 演示，下一篇講解列資料格式介紹
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/233323.html
標籤：.NET技术