Bootstrap Blazor Table 組件(四)自定義列生成
- 2022 年 5 月 5 日
- 筆記
- Blazor, BootstrapBlazor, c#
原文鏈接://www.cnblogs.com/ysmc/p/16223154.html
Bootstrap Blazor 官方鏈接://www.blazor.zone/tables
上一篇文章說到 Table 組件的智慧生成,有了自動生成,肯定會有自定義的。
一、指定生成列
除了可以在 AutoGenerateColumnAttribute 特性中指定每一列的行為外,我們可以手動在 Table 的 TableColumns 標籤中自定義要展現的列與列具有的行為,在此之前,我們要先將 AutoGenerateColumns 屬性設置成 false(該屬性默認為 false):
<Table TItem="Foo" IsPagination="true" PageItemsSource="PageItemsSource" ShowFooter="true" IsStriped="true" IsBordered="true" ShowSkeleton="true" IsMultipleSelect="true" ShowToolbar="true" ShowSearch="true" ShowExtendButtons="true" OnQueryAsync="@OnQueryAsync" AutoGenerateColumns="false" EditMode="EditMode.Popup"> <TableColumns> <TableColumn @bind-Field="@context.Name"></TableColumn> <TableColumn @bind-Field="@context.DateTime"></TableColumn> <TableColumn @bind-Field="@context.Address"></TableColumn> <TableColumn @bind-Field="@context.Count"></TableColumn> </TableColumns> </Table>
二、定義列功能
我們還可以在 TableColumn 中指定每一列具有的功能,如過濾、排序、是否可編輯等等;在此,我們將日期(DateTime) 與 數量(Count) 兩列分別賦予排序與過濾功能
<Table TItem="Foo" IsPagination="true" PageItemsSource="PageItemsSource" ShowFooter="true" IsStriped="true" IsBordered="true" ShowSkeleton="true" IsMultipleSelect="true" ShowToolbar="true" ShowSearch="true" ShowExtendButtons="true" OnQueryAsync="@OnQueryAsync" AutoGenerateColumns="false" EditMode="EditMode.Popup"> <TableColumns> <TableColumn @bind-Field="@context.Name"></TableColumn> <TableColumn @bind-Field="@context.DateTime" Sortable="true" Filterable="true"></TableColumn> <TableColumn @bind-Field="@context.Address"></TableColumn> <TableColumn @bind-Field="@context.Count" Sortable="true" Filterable="true"></TableColumn> </TableColumns> </Table>
可以看到,過濾功能還會根據你的屬性類型,自動生成日期選擇框,免除你還要手動輸入煩惱,同時,新增 與 編輯 按鈕也會根據你設置的列自動生成相應的表單:
三、自定義單元格
肯定有小夥伴問了,那我想自定義每一個單元格可以嗎?那必須是可以的,使用 TableColumn 中的 Template 可以實現你任何想要實現的效果,下面我來演示一下,例如當數量小於 30 時,將數量顯示成紅色:
<Table TItem="Foo" IsPagination="true" PageItemsSource="PageItemsSource" ShowFooter="true" IsStriped="true" IsBordered="true" ShowSkeleton="true" IsMultipleSelect="true" ShowToolbar="true" ShowSearch="true" ShowExtendButtons="true" OnQueryAsync="@OnQueryAsync" AutoGenerateColumns="false" EditMode="EditMode.Popup"> <TableColumns> <TableColumn @bind-Field="@context.Name"></TableColumn> <TableColumn @bind-Field="@context.DateTime" Sortable="true" Filterable="true"></TableColumn> <TableColumn @bind-Field="@context.Address"></TableColumn> <TableColumn @bind-Field="@context.Count" Sortable="true" Filterable="true"> <Template Context="row"> @if (row.Value < 30) { <span> <font color="red"> @row.Value </font> </span> } else { <span> <font> @row.Value </font> </span> } </Template> </TableColumn> </TableColumns> </Table>
寫在最後
Bootstrap Blazor 官網地址://www.blazor.zone
希望大佬們看到這篇文章,能給項目點個star支援下,感謝各位!
star流程:
1、訪問點擊項目鏈接:BootstrapBlazor
2、點擊star,如下圖,即可完成star,關注項目不迷路:
另外還有兩個GVP項目,大佬們方便的話也點下star唄,非常感謝:
BootstrapAdmin 項目地址:
//gitee.com/LongbowEnterprise/BootstrapAdmin
SliderCaptcha 項目地址:
//gitee.com/LongbowEnterprise/SliderCaptcha
交流群(QQ)歡迎加群討論
BA & Blazor ①(795206915) BA & Blazor ②(675147445)