Bootstrap Blazor Table 組件(四)自定義列生成

原文鏈接://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   star

2、點擊star,如下圖,即可完成star,關注項目不迷路:

 

另外還有兩個GVP項目,大佬們方便的話也點下star唄,非常感謝:

  BootstrapAdmin 項目地址:star
  //gitee.com/LongbowEnterprise/BootstrapAdmin

  SliderCaptcha 項目地址:star
  //gitee.com/LongbowEnterprise/SliderCaptcha

 

交流群(QQ)歡迎加群討論

       BA & Blazor ①(795206915)          BA & Blazor ②(675147445)