Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge points about how to use the automatic column generation function of the Table component in BootstrapBlazor. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Bootstrap Blazor is a set of enterprise-class UI component library, adapting to mobile support a variety of mainstream browsers, has been used in a number of delivery projects. Through this set of components, the development cycle can be greatly shortened and development costs can be saved. At present, more than 70 components have been developed and encapsulated.

Table should be the core component for managing website development, and a lot of functions can be derived from Table. Because there is almost no publicity for this set of components, not many people know about it, but many partners find that Table components simply cannot be used after using some other open source blazor projects.

Loading data is too slow.

Too many functions are missing.

Well, starting from today, we will officially introduce the performance explosion, the strongest king component in the simple BootstrapBlazor component library, Table. Because there are so many functions, there are nearly 60 functions needed in the actual combat in the example website. In the following time, we will introduce them one by one.

Automatic column generation function

When using the Table component, most components require the user to enter and display those columns, which adds a lot of column-related information to the razor file, as shown below

If an entity class has too many attributes. It will be very long to write here. The Table component of the BootstrapBlazor component library has a property AutoGenerateColumns. When its value is set to true, column information will be automatically generated according to the properties of the binding model, saving a lot of code for developers. Take a look at the example first.

How's it going? Through this line of code to complete the automatic generation of the table, and provide add, delete, change, query, filtering, sorting and other functions. The effect picture is as follows

Is there something fascinating that so little code can achieve so many functions? That's right! Developing with Table components of the BootstrapBlazor component library is as simple as that.

Draw the key points

The basic operations at the UI level of using Table components have been encapsulated into component functions, and developers only need to shift their energies to database operations, such as the

OnQueryAsync data query method

OnSaveAsync data saving method (internal automatic judgment of primary key to perform insert or update operation)

OnDeleteAsync data deletion method (you can delete real data or mark deletion by yourself)

OnResetSearchAsync reset search method

Realization principle

The Table component is a generic component, and the binding model type is set to BindItem entity class through TItem. In this entity class, the automatic column generation rule is set through the AutoGenerateColumnAttribute tag. The specific parameters are as follows:

[AttributeUsage (AttributeTargets.Property)] public class AutoGenerateColumnAttribute: Attribute, ITableColumn {/ get / set the display order / public int Order {get; set;} / get / set whether to ignore the default false does not ignore / public bool Ignore {get; set } / get / set whether the preceding column is editable by default true when set to false UI does not generate this column / public bool Editable {get; set;} = true; / get / set whether the current column is read-only when editing defaults to false / public bool Readonly {get; set } / get / set whether sorting is allowed by default: false / public bool Sortable {get; set;} / get / set whether it is the default sort sequence, default is false / public bool DefaultSort {get; set } / get / set whether the default collation is SortOrder.Unset / public SortOrder DefaultSortOrder {get; set;} / get / set whether to allow filtering data default to false / public bool Filterable {get; set } / get / set whether to participate in the search default is false / public bool Searchable {get; set;} / get / set column width / public int? Width {get; set;} / get / set whether this column is fixed by default false is not fixed / public bool Fixed {get; set;} / get / set whether the column displays / public bool Visible {get; set;} = true, which is visible by default. / get / set whether line breaks are allowed in this column. Default is false / public bool AllowTextWrap {get; set;} / get / set the text in this column exceeds the ellipsis and defaults to false / public bool TextEllipsis {get; set } / get / set column td custom style defaults to null not set / public string? CssClass {get; set;} / get / set display node threshold default BreakPoint.None is not set / public BreakPoint ShownWithBreakPoint {get; set;} / get / set format string such as time type setting yyyy-MM-dd / public string? FormatString {get; set;} / get / set text alignment defaults to Alignment.None / / public Alignment Align {get; set;} / get / set Field rollover prompt / public bool ShowTips {get; set } / get / set column formatting callback delegate / public Func? Formatter {get; set;} / get / set the editing template / public RenderFragment? EditTemplate {get; set;} / get / set the display template / public RenderFragment? Template {get; set;} / get / set the search template / public RenderFragment? SearchTemplate {get; set;} / get / set the filter template / public RenderFragment? FilterTemplate {get; set;} / get / set the field name / public string when the column header display text is not set? Text {get; set;}} above is all the content of this article entitled "how to use the automatic column generation function of Table components in BootstrapBlazor". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.