【转载】Bootstrap Blazor 组件介绍 Table （一）自动生成列功能介绍

发表评论
517 次浏览

A+

所属分类：.NET技术

摘要

原文链接：https://www.cnblogs.com/argozhang/p/14067391.html#4760067Bootstrap Blazor 是一套企业级 UI 组件库，适配移动端支持各种主流浏览器，已经在多个交付项目中使用。通过本套组件可以大大缩短开发周期，节约开发成本。目前已经开发、封装了 70 多个组件，欢迎有兴趣的同学试用。

Bootstrap Blazor 是一套企业级 UI 组件库，适配移动端支持各种主流浏览器，已经在多个交付项目中使用。通过本套组件可以大大缩短开发周期，节约开发成本。目前已经开发、封装了 70 多个组件，欢迎有兴趣的同学试用。

Gitee 开源地址为：https://gitee.com/LongbowEnterprise/BootstrapBlazor
Github 开源地址为：https://github.com/ArgoZhang/BootstrapBlazor

在线演示网站：https://www.blazor.zone

Table 应该是做管理型网站开发的核心组件了，通过 Table 可以衍生出非常多的功能，由于这套组件几乎没有宣传，导致知道的人不是很多，但是很多小伙伴都是使用了其他一些开源 blazor 项目后发现 Table 组件根本无法使用

加载数据太卡
功能缺失太多

那么从今天开始正式介绍一下性能爆炸，操作简单的 BootstrapBlazor 组件库中的最强王者组件 Table，由于功能实在是太多，仅示例目前网站中就有近 60 个各种实战中需要的功能，再接下来的时间里我们一一介绍

自动生成列功能

使用 Table 组件时大多数组件都是要求用户输入显示那些列，这样会在 razor 文件中增加大量列相关信息，如下所示

1 <TableColumn @bind-Field="@context.DateTime" Width="180" /> 2 <TableColumn @bind-Field="@context.Name" /> 3 <TableColumn @bind-Field="@context.Address" /> 4 <TableColumn @bind-Field="@context.Education" /> 5 <TableColumn @bind-Field="@context.Count" /> 6 <TableColumn @bind-Field="@context.Complete">

如果一个实体类属性太多时。这里书写起来就会篇幅非常长，BootstrapBlazor 组件库的 Table 组件有一个属性 AutoGenerateColumns ，当设置其值为 true 时，会根据绑定模型的属性进行自动生成列信息，为开发人员节约了大量的代码，先看示例

1 <Table TItem="BindItem" IsStriped="true" IsBordered="true" IsMultipleSelect="true" 2             ShowToolbar="true" ShowExtendButtons="true" AutoGenerateColumns="true" 3             OnQueryAsync="@OnEditQueryAsync" OnResetSearchAsync="@OnResetSearchAsync" 4             OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync"> 5 </Table>

怎么样？通过这一行代码就完成了表格的全自动生成，并且提供了增、删、改、查、过滤、排序等等全部功能。效果图如下

【转载】Bootstrap Blazor 组件介绍 Table （一）自动生成列功能介绍

是不是有一些心动，这么少的代码居然可以实现这么多功能？没错！用 BootstrapBlazor 组件库的 Table 组件开发就是这么简单。

划重点

使用 Table 组件 UI 层面的基本操作均已经封装到组件功能中，开发人员只需要将精力转移到数据库的操作上去，如例子中的

1 OnQueryAsync 数据查询方法 2 OnSaveAsync 数据保存方法（内部自动判断主键执行插入或者更新操作） 3 OnDeleteAsync 数据删除方法 （可自行进行真实删除或者标记删除操作） 4 OnResetSearchAsync 重置搜索方法

实现原理

Table 组件为泛型组件，通过 TItem 设定绑定模型类型为 BindItem 实体类，在这个实体类中通过 AutoGenerateColumnAttribute 标签对自动生成列规则进行设置，具体参数如下：

  1 [AttributeUsage(AttributeTargets.Property)]   2 public class AutoGenerateColumnAttribute : Attribute, ITableColumn   3 {   4     /// <summary>   5     /// 获得/设置 显示顺序   6     /// </summary>   7     public int Order { get; set; }   8    9     /// <summary>  10     /// 获得/设置 是否忽略 默认为 false 不忽略  11     /// </summary>  12     public bool Ignore { get; set; }  13   14     /// <summary>  15     /// 获得/设置 当前列是否可编辑 默认为 true 当设置为 false 时自动生成编辑 UI 不生成此列  16     /// </summary>  17     public bool Editable { get; set; } = true;  18   19     /// <summary>  20     /// 获得/设置 当前列编辑时是否只读 默认为 false  21     /// </summary>  22     public bool Readonly { get; set; }  23   24     /// <summary>  25     /// 获得/设置 是否允许排序 默认为 false  26     /// </summary>  27     public bool Sortable { get; set; }  28   29     /// <summary>  30     /// 获得/设置 是否为默认排序列 默认为 false  31     /// </summary>  32     public bool DefaultSort { get; set; }  33   34     /// <summary>  35     /// 获得/设置 是否为默认排序规则 默认为 SortOrder.Unset  36     /// </summary>  37     public SortOrder DefaultSortOrder { get; set; }  38   39     /// <summary>  40     /// 获得/设置 是否允许过滤数据 默认为 false  41     /// </summary>  42     public bool Filterable { get; set; }  43   44     /// <summary>  45     /// 获得/设置 是否参与搜索 默认为 false  46     /// </summary>  47     public bool Searchable { get; set; }  48   49     /// <summary>  50     /// 获得/设置 列宽  51     /// </summary>  52     public int? Width { get; set; }  53   54     /// <summary>  55     /// 获得/设置 是否固定本列 默认 false 不固定  56     /// </summary>  57     public bool Fixed { get; set; }  58   59     /// <summary>  60     /// 获得/设置 列是否显示 默认为 true 可见的  61     /// </summary>  62     public bool Visible { get; set; } = true;  63   64     /// <summary>  65     /// 获得/设置 本列是否允许换行 默认为 false  66     /// </summary>  67     public bool AllowTextWrap { get; set; }  68   69     /// <summary>  70     /// 获得/设置 本列文本超出省略 默认为 false  71     /// </summary>  72     public bool TextEllipsis { get; set; }  73   74     /// <summary>  75     /// 获得/设置 列 td 自定义样式 默认为 null 未设置  76     /// </summary>  77     public string? CssClass { get; set; }  78   79     /// <summary>  80     /// 获得/设置 显示节点阈值 默认值 BreakPoint.None 未设置  81     /// </summary>  82     public BreakPoint ShownWithBreakPoint { get; set; }  83   84     /// <summary>  85     /// 获得/设置 格式化字符串 如时间类型设置 yyyy-MM-dd  86     /// </summary>  87     public string? FormatString { get; set; }  88   89     /// <summary>  90     /// 获得/设置 文字对齐方式 默认为 Alignment.None  91     /// </summary>  92     public Alignment Align { get; set; }  93   94     /// <summary>  95     /// 获得/设置 字段鼠标悬停提示  96     /// </summary>  97     public bool ShowTips { get; set; }  98   99     /// <summary> 100     /// 获得/设置 列格式化回调委托 101     /// </summary> 102     public Func<object?, Task<string>>? Formatter { get; set; } 103  104     /// <summary> 105     /// 获得/设置 编辑模板 106     /// </summary> 107     public RenderFragment<object>? EditTemplate { get; set; } 108  109     /// <summary> 110     /// 获得/设置 显示模板 111     /// </summary> 112     public RenderFragment<object>? Template { get; set; } 113  114     /// <summary> 115     /// 获得/设置 搜索模板 116     /// </summary> 117     public RenderFragment<object>? SearchTemplate { get; set; } 118  119     /// <summary> 120     /// 获得/设置 过滤模板 121     /// </summary> 122     public RenderFragment? FilterTemplate { get; set; } 123  124     /// <summary> 125     /// 获得/设置 列头显示文字未设置时显示字段名称 126     /// </summary> 127     public string? Text { get; set; } 128 }

这里有大量可以限定的参数基本看注释就知道啦。更多文档请查看在线演示文档 https://www.blazor.zone/tables/column

原文链接：https://www.cnblogs.com/argozhang/p/14067391.html#4760067

Gitee 开源地址为：https://gitee.com/LongbowEnterprise/BootstrapBlazor
Github 开源地址为：https://github.com/ArgoZhang/BootstrapBlazor

在线演示网站：https://www.blazor.zone

加载数据太卡
功能缺失太多

自动生成列功能

使用 Table 组件时大多数组件都是要求用户输入显示那些列，这样会在 razor 文件中增加大量列相关信息，如下所示

1 <TableColumn @bind-Field="@context.DateTime" Width="180" /> 2 <TableColumn @bind-Field="@context.Name" /> 3 <TableColumn @bind-Field="@context.Address" /> 4 <TableColumn @bind-Field="@context.Education" /> 5 <TableColumn @bind-Field="@context.Count" /> 6 <TableColumn @bind-Field="@context.Complete">

1 <Table TItem="BindItem" IsStriped="true" IsBordered="true" IsMultipleSelect="true" 2             ShowToolbar="true" ShowExtendButtons="true" AutoGenerateColumns="true" 3             OnQueryAsync="@OnEditQueryAsync" OnResetSearchAsync="@OnResetSearchAsync" 4             OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync"> 5 </Table>

怎么样？通过这一行代码就完成了表格的全自动生成，并且提供了增、删、改、查、过滤、排序等等全部功能。效果图如下

【转载】Bootstrap Blazor 组件介绍 Table （一）自动生成列功能介绍

是不是有一些心动，这么少的代码居然可以实现这么多功能？没错！用 BootstrapBlazor 组件库的 Table 组件开发就是这么简单。

划重点

使用 Table 组件 UI 层面的基本操作均已经封装到组件功能中，开发人员只需要将精力转移到数据库的操作上去，如例子中的

1 OnQueryAsync 数据查询方法 2 OnSaveAsync 数据保存方法（内部自动判断主键执行插入或者更新操作） 3 OnDeleteAsync 数据删除方法 （可自行进行真实删除或者标记删除操作） 4 OnResetSearchAsync 重置搜索方法

实现原理

  1 [AttributeUsage(AttributeTargets.Property)]   2 public class AutoGenerateColumnAttribute : Attribute, ITableColumn   3 {   4     /// <summary>   5     /// 获得/设置 显示顺序   6     /// </summary>   7     public int Order { get; set; }   8    9     /// <summary>  10     /// 获得/设置 是否忽略 默认为 false 不忽略  11     /// </summary>  12     public bool Ignore { get; set; }  13   14     /// <summary>  15     /// 获得/设置 当前列是否可编辑 默认为 true 当设置为 false 时自动生成编辑 UI 不生成此列  16     /// </summary>  17     public bool Editable { get; set; } = true;  18   19     /// <summary>  20     /// 获得/设置 当前列编辑时是否只读 默认为 false  21     /// </summary>  22     public bool Readonly { get; set; }  23   24     /// <summary>  25     /// 获得/设置 是否允许排序 默认为 false  26     /// </summary>  27     public bool Sortable { get; set; }  28   29     /// <summary>  30     /// 获得/设置 是否为默认排序列 默认为 false  31     /// </summary>  32     public bool DefaultSort { get; set; }  33   34     /// <summary>  35     /// 获得/设置 是否为默认排序规则 默认为 SortOrder.Unset  36     /// </summary>  37     public SortOrder DefaultSortOrder { get; set; }  38   39     /// <summary>  40     /// 获得/设置 是否允许过滤数据 默认为 false  41     /// </summary>  42     public bool Filterable { get; set; }  43   44     /// <summary>  45     /// 获得/设置 是否参与搜索 默认为 false  46     /// </summary>  47     public bool Searchable { get; set; }  48   49     /// <summary>  50     /// 获得/设置 列宽  51     /// </summary>  52     public int? Width { get; set; }  53   54     /// <summary>  55     /// 获得/设置 是否固定本列 默认 false 不固定  56     /// </summary>  57     public bool Fixed { get; set; }  58   59     /// <summary>  60     /// 获得/设置 列是否显示 默认为 true 可见的  61     /// </summary>  62     public bool Visible { get; set; } = true;  63   64     /// <summary>  65     /// 获得/设置 本列是否允许换行 默认为 false  66     /// </summary>  67     public bool AllowTextWrap { get; set; }  68   69     /// <summary>  70     /// 获得/设置 本列文本超出省略 默认为 false  71     /// </summary>  72     public bool TextEllipsis { get; set; }  73   74     /// <summary>  75     /// 获得/设置 列 td 自定义样式 默认为 null 未设置  76     /// </summary>  77     public string? CssClass { get; set; }  78   79     /// <summary>  80     /// 获得/设置 显示节点阈值 默认值 BreakPoint.None 未设置  81     /// </summary>  82     public BreakPoint ShownWithBreakPoint { get; set; }  83   84     /// <summary>  85     /// 获得/设置 格式化字符串 如时间类型设置 yyyy-MM-dd  86     /// </summary>  87     public string? FormatString { get; set; }  88   89     /// <summary>  90     /// 获得/设置 文字对齐方式 默认为 Alignment.None  91     /// </summary>  92     public Alignment Align { get; set; }  93   94     /// <summary>  95     /// 获得/设置 字段鼠标悬停提示  96     /// </summary>  97     public bool ShowTips { get; set; }  98   99     /// <summary> 100     /// 获得/设置 列格式化回调委托 101     /// </summary> 102     public Func<object?, Task<string>>? Formatter { get; set; } 103  104     /// <summary> 105     /// 获得/设置 编辑模板 106     /// </summary> 107     public RenderFragment<object>? EditTemplate { get; set; } 108  109     /// <summary> 110     /// 获得/设置 显示模板 111     /// </summary> 112     public RenderFragment<object>? Template { get; set; } 113  114     /// <summary> 115     /// 获得/设置 搜索模板 116     /// </summary> 117     public RenderFragment<object>? SearchTemplate { get; set; } 118  119     /// <summary> 120     /// 获得/设置 过滤模板 121     /// </summary> 122     public RenderFragment? FilterTemplate { get; set; } 123  124     /// <summary> 125     /// 获得/设置 列头显示文字未设置时显示字段名称 126     /// </summary> 127     public string? Text { get; set; } 128 }

这里有大量可以限定的参数基本看注释就知道啦。更多文档请查看在线演示文档 https://www.blazor.zone/tables/column

便宜好用的国外VPS推荐