Home>Article>Web Front-end> A brief analysis of the automatic column generation function of the Table component in Bootstrap Blazor
The followingBootstrapcolumn 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
Tableshould be the core component for management website development. A lot of functions can be derived fromTable. 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 theTablecomponent cannot be used at all.
So from today on, I will officially introduce the performance explosion and simple operationBootstrapBlazorThe strongest king component in the component libraryTable, 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 theTablecomponent, most components require user input for display Those columns, this will add a lot of column-related information to therazorfile, as shown below
If there are too many attributes of an entity class. It will be very long to write here.BootstrapBlazorTheTablecomponent of the component library has a propertyAutoGenerateColumns. When its value is set totrueWhen , 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
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 theTablecomponent using theBootstrapBlazorcomponent library.
Key points
UseTableBasic 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
OnQueryAsyncin the example, data query methodOnSaveAsyncdata saving method (automatically determine primary key execution internally) Insert or update operation)OnDeleteAsyncData deletion method (you can perform real deletion or mark deletion operation by yourself)OnResetSearchAsyncReset search methodImplementation principle
TableThe component is a generic component, set byTItemThe binding model type is set toBindItementity class. In this entity class, the automatically generated column rules are set through theAutoGenerateColumnAttributetag. The specific parameters are as follows:
[AttributeUsage(AttributeTargets.Property)] public class AutoGenerateColumnAttribute : Attribute, ITableColumn { /// /// 获得/设置 显示顺序 /// public int Order { get; set; } /// /// 获得/设置 是否忽略 默认为 false 不忽略 /// public bool Ignore { get; set; } /// /// 获得/设置 当前列是否可编辑 默认为 true 当设置为 false 时自动生成编辑 UI 不生成此列 /// public bool Editable { get; set; } = true; /// /// 获得/设置 当前列编辑时是否只读 默认为 false /// public bool Readonly { get; set; } /// /// 获得/设置 是否允许排序 默认为 false /// public bool Sortable { get; set; } /// /// 获得/设置 是否为默认排序列 默认为 false /// public bool DefaultSort { get; set; } /// /// 获得/设置 是否为默认排序规则 默认为 SortOrder.Unset /// public SortOrder DefaultSortOrder { get; set; } /// /// 获得/设置 是否允许过滤数据 默认为 false /// public bool Filterable { get; set; } /// /// 获得/设置 是否参与搜索 默认为 false /// public bool Searchable { get; set; } /// /// 获得/设置 列宽 /// public int? Width { get; set; } /// /// 获得/设置 是否固定本列 默认 false 不固定 /// public bool Fixed { get; set; } /// /// 获得/设置 列是否显示 默认为 true 可见的 /// public bool Visible { get; set; } = true; /// /// 获得/设置 本列是否允许换行 默认为 false /// public bool AllowTextWrap { get; set; } /// /// 获得/设置 本列文本超出省略 默认为 false /// public bool TextEllipsis { get; set; } /// /// 获得/设置 列 td 自定义样式 默认为 null 未设置 /// public string? CssClass { get; set; } /// /// 获得/设置 显示节点阈值 默认值 BreakPoint.None 未设置 /// public BreakPoint ShownWithBreakPoint { get; set; } /// /// 获得/设置 格式化字符串 如时间类型设置 yyyy-MM-dd /// public string? FormatString { get; set; } /// /// 获得/设置 文字对齐方式 默认为 Alignment.None /// public Alignment Align { get; set; } /// /// 获得/设置 字段鼠标悬停提示 /// public bool ShowTips { get; set; } /// /// 获得/设置 列格式化回调委托 /// public Func>? Formatter { get; set; } /// /// 获得/设置 编辑模板 /// public RenderFragment
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!