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 文件中增加大量列相关信息,如下所示

<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Education" />
<TableColumn @bind-Field="@context.Count" />
<TableColumn @bind-Field="@context.Complete">

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

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

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

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

划重点

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

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

实现原理

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

[AttributeUsage(AttributeTargets.Property)]
public class AutoGenerateColumnAttribute : Attribute, ITableColumn
{
/// <summary>
/// 获得/设置 显示顺序
/// </summary>
public int Order { get; set; } /// <summary>
/// 获得/设置 是否忽略 默认为 false 不忽略
/// </summary>
public bool Ignore { get; set; } /// <summary>
/// 获得/设置 当前列是否可编辑 默认为 true 当设置为 false 时自动生成编辑 UI 不生成此列
/// </summary>
public bool Editable { get; set; } = true; /// <summary>
/// 获得/设置 当前列编辑时是否只读 默认为 false
/// </summary>
public bool Readonly { get; set; } /// <summary>
/// 获得/设置 是否允许排序 默认为 false
/// </summary>
public bool Sortable { get; set; } /// <summary>
/// 获得/设置 是否为默认排序列 默认为 false
/// </summary>
public bool DefaultSort { get; set; } /// <summary>
/// 获得/设置 是否为默认排序规则 默认为 SortOrder.Unset
/// </summary>
public SortOrder DefaultSortOrder { get; set; } /// <summary>
/// 获得/设置 是否允许过滤数据 默认为 false
/// </summary>
public bool Filterable { get; set; } /// <summary>
/// 获得/设置 是否参与搜索 默认为 false
/// </summary>
public bool Searchable { get; set; } /// <summary>
/// 获得/设置 列宽
/// </summary>
public int? Width { get; set; } /// <summary>
/// 获得/设置 是否固定本列 默认 false 不固定
/// </summary>
public bool Fixed { get; set; } /// <summary>
/// 获得/设置 列是否显示 默认为 true 可见的
/// </summary>
public bool Visible { get; set; } = true; /// <summary>
/// 获得/设置 本列是否允许换行 默认为 false
/// </summary>
public bool AllowTextWrap { get; set; } /// <summary>
/// 获得/设置 本列文本超出省略 默认为 false
/// </summary>
public bool TextEllipsis { get; set; } /// <summary>
/// 获得/设置 列 td 自定义样式 默认为 null 未设置
/// </summary>
public string? CssClass { get; set; } /// <summary>
/// 获得/设置 显示节点阈值 默认值 BreakPoint.None 未设置
/// </summary>
public BreakPoint ShownWithBreakPoint { get; set; } /// <summary>
/// 获得/设置 格式化字符串 如时间类型设置 yyyy-MM-dd
/// </summary>
public string? FormatString { get; set; } /// <summary>
/// 获得/设置 文字对齐方式 默认为 Alignment.None
/// </summary>
public Alignment Align { get; set; } /// <summary>
/// 获得/设置 字段鼠标悬停提示
/// </summary>
public bool ShowTips { get; set; } /// <summary>
/// 获得/设置 列格式化回调委托
/// </summary>
public Func<object?, Task<string>>? Formatter { get; set; } /// <summary>
/// 获得/设置 编辑模板
/// </summary>
public RenderFragment<object>? EditTemplate { get; set; } /// <summary>
/// 获得/设置 显示模板
/// </summary>
public RenderFragment<object>? Template { get; set; } /// <summary>
/// 获得/设置 搜索模板
/// </summary>
public RenderFragment<object>? SearchTemplate { get; set; } /// <summary>
/// 获得/设置 过滤模板
/// </summary>
public RenderFragment? FilterTemplate { get; set; } /// <summary>
/// 获得/设置 列头显示文字未设置时显示字段名称
/// </summary>
public string? Text { get; set; }
}

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

Bootstrap Blazor 组件介绍 Table (一)自动生成列功能介绍的更多相关文章

  1. Bootstrap Blazor 组件介绍 Table (二)自定义模板列功能介绍

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

  2. Bootstrap Blazor 组件库 Row 布局组件(栅格系统)

    原文链接:https://www.cnblogs.com/ysmc/p/16133351.html 在 Bootstrap 中,栅格相信大家都很熟悉,简直就是布局神器啊,Bootstrap Blazo ...

  3. c# DataGridView在使用DataSource时,只显示指定的列或禁止自动生成列

    可通过设置DataGridView控件的AutoGenerateColumns属性来处理. //禁止自动生成列,以下场景会用到:数据源的列超过需要展示的列 this.gridDevice.AutoGe ...

  4. wpf 通过为DataGrid所绑定的数据源类型的属性设置Attribute改变DataGrid自动生成列的顺序

    环境Win10 VS2019 .Net Framework4.8 在wpf中,如果为一个DataGrid绑定到一个数据源,默认情况下DataGrid会为数据源类型的每个属性生成一个列(Column)对 ...

  5. Bootstrap Blazor 组件介绍 Table (三)列数据格式功能介绍

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

  6. Ant Design Blazor 组件库的路由复用多标签页介绍

    最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件. 前 ...

  7. 如何不让DataGridView自动生成列

    如果不想让DataGridView自动生成与数据源对应的列, 只需要把属性AutoGenerateColumns设为false即可. 需要注意: 在界面设计的属性窗口中是看不到AutoGenerate ...

  8. Bootstrap Blazor 组件库

    项目介绍 Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应 ...

  9. Django的restful api自动生成工具django-rest-swagger介绍

    源码位置:https://github.com/marcgibbons/django-rest-swagger 文档位置:https://marcgibbons.com/django-rest-swa ...

随机推荐

  1. CSS动画之转换模块

    2D转换模块:注意点:1.可以类似于过渡模块一样简写,但是这里不是用逗号隔开而是用空格 2.2D的转换模块会修改元素的坐标系,所以旋转之后的平移就不是水平平移 格式:旋转:transform: rot ...

  2. NB-IoT的同步信号解析

    NB-IoT的小区搜索和LTE的小区搜索是类似的,每个UE都是通过对同步信号的检测,来实现与小区时间和频率上的同步,以此来获取小区的ID.NB-IoT的同步信号包括NPSS和NSSS. NPSS用于完 ...

  3. Jmeter CSV数据文件设置使用之一

    第一步: 在Jmeter 里,新建CSV数据文件设置,选择对应的文件,变量名称根据需要自己取,如bug,test,如下图所示: 第二步: 配置Jmetet 数据源,参数对应的名称要与CSV数据文件设置 ...

  4. python爬虫使用xpath解析页面和提取数据

    XPath解析页面和提取数据 一.简介 关注公众号"轻松学编程"了解更多. XPath即为XML路径语言,它是一种用来确定XML(标准通用标记语言的子集)文档中某部分位置的语言.X ...

  5. [BZOJ 2287/POJ openjudge1009/Luogu P4141] 消失之物

    题面: 传送门:http://poj.openjudge.cn/practice/1009/ Solution DP+DP 首先,我们可以很轻松地求出所有物品都要的情况下的选择方案数,一个简单的满背包 ...

  6. svg究竟是什么?

    svg究竟是什么? 1 要点 要点1:svg与jpg/png等格式的用途完全不同,不可相提并论,没有可比性,不可互相替代. 要点2:日常生活中,我们用相机拍摄自然景象得到的照片和视频,能且只能用jpg ...

  7. XJOI NOIP501/511训练22 ttt学字符串

    ttt学字符串 题目大意 大法师ttt 最近在学习字符串,有一天他看到魔力xtx左手拿着A字符串,右手拿着B字符串,两个字符串的长度都是一样的,而且都由abc三种字符构成,大法师ttt的灵力值为C,现 ...

  8. Thinkphp3.2 cms之权限管理

    五.权限管理 <?php namespace Admin\Controller; use Think\Controller; class CommonController extends Con ...

  9. leetcode111:combination-sum

    题目描述 给出一组候选数C和一个目标数T,找出候选数中加起来和等于T的所有组合. C中的数字在组合中可以被无限次使用 注意: 题目中所有的数字(包括目标数T)都是正整数 你给出的组合中的数字 (a 1 ...

  10. I am coming back

    时隔两年,我回来了,回到这个我梦开始的地方,带着一个新的身份--研究生!