A brief analysis of the automatic column generation function of the Table component in Bootstrap Blazor

The following Bootstrap column will take you through the Table component in BootstrapBlazor and introduce the automatic column generation function of the Table component. I hope it will be helpful to everyone!

Bootstrap Blazor is an enterprise-level UI component library that is adapted to mobile devices and supports various mainstream browsers. It has been used in multiple delivery projects. This set of components can greatly shorten the development cycle and save development costs. More than 70 components have been developed and packaged so far.

• Gitee open source address is: https://gitee.com/LongbowEnterprise/BootstrapBlazor

• Github open source address is: https://github .com/ArgoZhang/BootstrapBlazor
  

• Online demo website: https://www.blazor.zone

Table should be the core component for management website development. A lot of functions can be derived from Table. Since there is almost no publicity for this set of components, not many people know about it, but many friends After using some other open source blazor projects, I found that the Table component cannot be used at all.

• Loading data is too stuck
• There are too many missing functions

So from today on, I will officially introduce the performance explosion and simple operationBootstrapBlazor The strongest king component in the component library Table, because there are so many functions, there are nearly 60 functions in the current website that are needed in actual combat. In the next time, we will Introduce one by one

Automatically generate column function

When using the Table component, most components require user input for display Those columns, this will add a lot of column-related information to the razor file, as shown below

<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">

If there are too many attributes of an entity class. It will be very long to write here. BootstrapBlazor The Table component of the component library has a property AutoGenerateColumns . When its value is set to true When , column information will be automatically generated based on the attributes of the bound model, saving developers a lot of code. How about taking a look at the example

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

first? Through this line of code, the table is fully automatically generated, and all functions such as adding, deleting, modifying, checking, filtering, sorting, etc. are provided. The rendering is as follows

#Are you a little excited that such a small amount of code can actually achieve so many functions? That's right! It is so simple to develop the Table component using the BootstrapBlazor component library.

Key points

UseTable Basic operations at the component UI level have been encapsulated into component functions, and developers only need to shift their energy to Database operations, such as

• OnQueryAsync in the example, data query method
• OnSaveAsync data saving method (automatically determine primary key execution internally) Insert or update operation)
• OnDeleteAsync Data deletion method (you can perform real deletion or mark deletion operation by yourself)
• OnResetSearchAsync Reset search method

Implementation principle

Table The component is a generic component, set by TItem The binding model type is set to BindItem entity class. In this entity class, the automatically generated column rules are set through the AutoGenerateColumnAttribute tag. The specific parameters are as follows:

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

here There are a large number of parameters that can be limited, just look at the comments. For more documents, please view the online demonstration document https://www.blazor.zone/tables/column

For more knowledge about bootstrap, please visit: bootstrap tutorial! !

The above is the detailed content of A brief analysis of the automatic column generation function of the Table component in Bootstrap Blazor. For more information, please follow other related articles on the PHP Chinese website!