浅析BootstrapBlazor中Table组件的自动生成列功能

发布时间:2022-05-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了浅析BootstrapBlazor中Table组件的自动生成列功能脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
下面Bootstrap栏目带大家了解一下BootstrapBlazor中的Table组件,介绍一下Table组件的自动生成列功能,希望对大家有所帮助

浅析BootstrapBlazor中Table组件的自动生成列功能

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组件的自动生成列功能

是不是有一些心动,这么少的代码居然可以实现这么多功能?没错!用 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的相关知识,可访问:bootstrap教程!!

以上就是浅析BootstrapBlazor中Table组件的自动生成列功能的详细内容,更多请关注脚本宝典其它相关文章

脚本宝典总结

以上是脚本宝典为你收集整理的浅析BootstrapBlazor中Table组件的自动生成列功能全部内容,希望文章能够帮你解决浅析BootstrapBlazor中Table组件的自动生成列功能所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。