BootstrapBlazor 之王者组件 Table

最新推荐文章于 2024-05-21 09:32:06 发布

dotNET跨平台

最新推荐文章于 2024-05-21 09:32:06 发布

阅读量2k

点赞数 1

文章标签： css html 编程语言 c# .net

强大的表格组件

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; }
}