Gitee 開源地址爲:
https://gitee.com/LongbowEnterprise/BootstrapBlazor
Github 開源地址爲:
https://github.com/ArgoZhang/BootstrapBlazor
在線演示網站:
https://www.blazor.zone
1、前言
Table
(表格)組件應該是做管理型網站開發的核心組件了,通過 Table
可以衍生出非常多的功能,由於這套組件幾乎沒有宣傳,導致知道的人不是很多,但是很多小夥伴都是使用了其他一些開源 blazor
項目後發現 Table
組件根本無法使用。
加載數據太卡
功能缺失太多
那麼從今天開始正式介紹一下性能爆炸,操作簡單的 BootstrapBlazor
組件庫中的最強王者組件 Table
,由於功能實在是太多,僅示例目前網站中就有近 60 個各種實戰中需要的功能。
表格文檔:
https://www.blazor.zone/tables
2、一句代碼生成表格
BootstrapBlazor
組件庫的 Table
組件有一個屬性 AutoGenerateColumns
,當設置其值爲 true
時,會根據綁定模型的屬性進行自動生成列信息,爲開發人員節約了大量的代碼,先看示例代碼:
備註:安裝預覽版的
BootstrapBlazor
纔有AutoGenerateColumns
屬性
index.razor
文件
<Table TItem="UserInfo" Items="@UserInfoList" AutoGenerateColumns="true" />
@code {
//模擬生成數據
private static readonly Random random = new Random();
protected static List<UserInfo> GenerateUserInfos() => new List<UserInfo>(Enumerable.Range(1, 10).Select(i => new UserInfo()
{
Id = i,
Name = $"張三 {i:d4}",
Address = $"上海市普陀區金沙江路 {random.Next(1000, 2000)} 弄",
Age = random.Next(20, 50),
Mobile = "1301234" + random.Next(1000, 9999)
}));
protected static IEnumerable<UserInfo> UserInfoList { get; } = GenerateUserInfos();
}
UserInfo.cs
類
public class UserInfo
{
public int Id { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public int Age { get; set; }
public string Mobile { get; set; }
}
再來看看效果圖如何:
你沒看錯,就這麼很簡單的幾句代碼生成了一個可展示的表格。
下巴掉地上了吧,先收起來,這麼簡單?
下面再加入一些表單功能試試看,將 index.razor
代碼修改如下:
<Table
TItem="UserInfo"
Items="@UserInfoList"
AutoGenerateColumns="true"
ShowToolbar="true" />
僅僅加入了 ShowToolbar="true"
這句代碼而已。截個圖瞅瞅:
工具欄有了!但是點擊按鈕右下角提示需要實現保存數據方法。我們再來試試看:
<Table
TItem="UserInfo"
Items="@UserInfoList"
AutoGenerateColumns="true"
ShowToolbar="true"
IsMultipleSelect="true" //--> 開啓多選框,用於編輯刪除選擇數據
OnSaveAsync="@OnSaveAsync" //--> 提供保存數據方法
/>
在 index.razor
的 @code
大括號里加入一個 OnSaveAsync
方法:
//這裏只是演示,沒有增加修改數據
protected Task<bool> OnSaveAsync(UserInfo userInfo)
{
return Task.FromResult(true);
}
這次也是僅僅加入了四五行代碼而已。截個圖瞅瞅:
新增數據對話框有了!
編輯對話框有了!
刪除操作有了!
到這裏我相信大家已經有了躍躍欲試的感覺,那就別客氣,動手吧~~
3、表格美化:
1) 加入斑馬紋效果
加入屬性:IsStriped="true"
即可
代碼看起來是這樣的:
<Table
TItem="UserInfo"
Items="@UserInfoList"
AutoGenerateColumns="true"
ShowToolbar="true"
IsMultipleSelect="true"
OnSaveAsync="@OnSaveAsync"
IsStriped="true"/>
2) 加入邊框
加入屬性:IsBordered="true"
即可
代碼看起來是這樣的:
<Table
TItem="UserInfo"
Items="@UserInfoList"
AutoGenerateColumns="true"
ShowToolbar="true"
IsMultipleSelect="true"
OnSaveAsync="@OnSaveAsync"
IsStriped="true"
IsBordered="true"/>
3) 緊湊型表格
加入屬性:TableSize="TableSize.Compact"
即可。
代碼太簡單就不展示了,免得有人罵我~~~(手動狗頭)
現在的樣子小而美~~
4) 生成列屬性更改
上面的截圖大家都看到了,標題都是類屬性名,自動生成的,(心裏暗罵這TM交給客戶不罵死我),彆着急,將 Display
特性加入到 UserInfo
類屬性上就可以自定義了。瞅瞅代碼:
using System.ComponentModel;
public class UserInfo
{
[DisplayName("自動編號")]
public int Id { get; set; }
[DisplayName("名稱")]
public string Name { get; set; }
[DisplayName("地址")]
public string Address { get; set; }
[DisplayName("年齡")]
public int Age { get; set; }
[DisplayName("手機號")]
public string Mobile { get; set; }
}
還有很多很多可以自定義的東西,比如,每一列的格式,排序等等等待您的探索,這一期就到這裏。以後還會繼續介紹更多組件,更多有意思的玩法。
希望您會喜歡,覺得有意思,加個關注,點個再看,再去
github
上點個⭐。
推薦閱讀:
開發者精選資訊
每日爲您推薦開發精選資訊
長按二維碼
關注 「開發者精選資訊」 公衆號
好文章,我在看 ❤️