Bootstrap Blazor 테이블 구성 요소의 자동 열 생성 기능에 대한 간략한 분석

다음 Bootstrap 칼럼에서는 Bootstrap Blazor의 테이블 구성 요소를 이해하고 테이블 구성 요소의 자동 열 생성 기능을 소개하겠습니다. 모든 분들께 도움이 되길 바랍니다!

Bootstrap Blazor는 모바일 장치에 적합하고 다양한 주류 브라우저를 지원하는 엔터프라이즈급 UI 구성 요소 라이브러리입니다. 이 구성요소 세트는 개발 주기를 크게 단축하고 개발 비용을 절감할 수 있습니다. 지금까지 70개 이상의 구성요소가 개발 및 패키징되었습니다.

• Gitee 오픈 소스 주소: https://gitee.com/LongbowEnterprise/BootstrapBlazor

• Github 오픈 소스 주소: https://github.com/ArgoZhang/BootstrapBlazor
  

• 온라인 데모 웹사이트 : https://www.blazor.zone

테이블은 관리 웹사이트 개발의 핵심 구성요소여야 합니다. 테이블에서 많은 기능을 파생시킬 수 있기 때문입니다. 이 구성 요소 집합은 거의 공개되지 않아 이에 대해 아는 사람이 많지 않습니다. 그러나 많은 친구들이 다른 오픈 소스 Blazor 프로젝트를 사용하여 Table 구성 요소를 전혀 사용할 수 없다는 사실을 발견했습니다. 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

데이터 로딩이 너무 느립니다
누락된 기능이 너무 많습니다

그래서 오늘부터 국내 최강 킹 컴포넌트인 BootstrapBlazor의 폭발적인 성능과 간단한 조작법을 정식으로 소개하겠습니다. 컴포넌트 라이브러리 테이블, 기능이 너무 많아서 현재 웹사이트에는 예시로만 보면 실제 전투에 필요한 기능이 거의 60개에 달합니다. 다음 시간에 하나씩 소개하겠습니다

🎜 🎜자동 생성 열 함수🎜🎜🎜 테이블 구성 요소를 사용할 때 대부분의 구성 요소에서는 사용자가 표시할 열을 입력해야 합니다. , 이는 razor code>에 표시됩니다. 아래와 같이 파일에 많은 열 관련 정보를 추가합니다.🎜<pre class="brush:html;toolbar:false;">[AttributeUsage(AttributeTargets.Property)] public class AutoGenerateColumnAttribute : Attribute, ITableColumn { /// &lt;summary&gt; /// 获得/设置 显示顺序 /// &lt;/summary&gt; public int Order { get; set; } /// &lt;summary&gt; /// 获得/设置 是否忽略 默认为 false 不忽略 /// &lt;/summary&gt; public bool Ignore { get; set; } /// &lt;summary&gt; /// 获得/设置 当前列是否可编辑 默认为 true 当设置为 false 时自动生成编辑 UI 不生成此列 /// &lt;/summary&gt; public bool Editable { get; set; } = true; /// &lt;summary&gt; /// 获得/设置 当前列编辑时是否只读 默认为 false /// &lt;/summary&gt; public bool Readonly { get; set; } /// &lt;summary&gt; /// 获得/设置 是否允许排序 默认为 false /// &lt;/summary&gt; public bool Sortable { get; set; } /// &lt;summary&gt; /// 获得/设置 是否为默认排序列 默认为 false /// &lt;/summary&gt; public bool DefaultSort { get; set; } /// &lt;summary&gt; /// 获得/设置 是否为默认排序规则 默认为 SortOrder.Unset /// &lt;/summary&gt; public SortOrder DefaultSortOrder { get; set; } /// &lt;summary&gt; /// 获得/设置 是否允许过滤数据 默认为 false /// &lt;/summary&gt; public bool Filterable { get; set; } /// &lt;summary&gt; /// 获得/设置 是否参与搜索 默认为 false /// &lt;/summary&gt; public bool Searchable { get; set; } /// &lt;summary&gt; /// 获得/设置 列宽 /// &lt;/summary&gt; public int? Width { get; set; } /// &lt;summary&gt; /// 获得/设置 是否固定本列 默认 false 不固定 /// &lt;/summary&gt; public bool Fixed { get; set; } /// &lt;summary&gt; /// 获得/设置 列是否显示 默认为 true 可见的 /// &lt;/summary&gt; public bool Visible { get; set; } = true; /// &lt;summary&gt; /// 获得/设置 本列是否允许换行 默认为 false /// &lt;/summary&gt; public bool AllowTextWrap { get; set; } /// &lt;summary&gt; /// 获得/设置 本列文本超出省略 默认为 false /// &lt;/summary&gt; public bool TextEllipsis { get; set; } /// &lt;summary&gt; /// 获得/设置 列 td 自定义样式 默认为 null 未设置 /// &lt;/summary&gt; public string? CssClass { get; set; } /// &lt;summary&gt; /// 获得/设置 显示节点阈值 默认值 BreakPoint.None 未设置 /// &lt;/summary&gt; public BreakPoint ShownWithBreakPoint { get; set; } /// &lt;summary&gt; /// 获得/设置 格式化字符串 如时间类型设置 yyyy-MM-dd /// &lt;/summary&gt; public string? FormatString { get; set; } /// &lt;summary&gt; /// 获得/设置 文字对齐方式 默认为 Alignment.None /// &lt;/summary&gt; public Alignment Align { get; set; } /// &lt;summary&gt; /// 获得/设置 字段鼠标悬停提示 /// &lt;/summary&gt; public bool ShowTips { get; set; } /// &lt;summary&gt; /// 获得/设置 列格式化回调委托 /// &lt;/summary&gt; public Func&lt;object?, Task&lt;string&gt;&gt;? Formatter { get; set; } /// &lt;summary&gt; /// 获得/设置 编辑模板 /// &lt;/summary&gt; public RenderFragment&lt;object&gt;? EditTemplate { get; set; } /// &lt;summary&gt; /// 获得/设置 显示模板 /// &lt;/summary&gt; public RenderFragment&lt;object&gt;? Template { get; set; } /// &lt;summary&gt; /// 获得/设置 搜索模板 /// &lt;/summary&gt; public RenderFragment&lt;object&gt;? SearchTemplate { get; set; } /// &lt;summary&gt; /// 获得/设置 过滤模板 /// &lt;/summary&gt; public RenderFragment? FilterTemplate { get; set; } /// &lt;summary&gt; /// 获得/设置 列头显示文字未设置时显示字段名称 /// &lt;/summary&gt; public string? Text { get; set; } }</pre>🎜엔티티 클래스의 속성이 너무 많은 경우. 여기에 작성하면 매우 길어집니다. <code>BootstrapBlazor 구성 요소 라이브러리의 Table 구성 요소에는 해당 값이 AutoGenerateColumns 속성이 있습니다. code>true, 바인딩된 모델의 속성을 기반으로 열 정보가 자동으로 생성되므로 개발자의 코드가 많이 절약됩니다. 먼저 🎜rrreee🎜 예제를 살펴보는 것이 어떨까요? 이 코드 라인을 통해 테이블은 완전 자동으로 생성되며 추가, 삭제, 수정, 확인, 필터링, 정렬 등의 모든 기능이 제공됩니다. 렌더링은 다음과 같습니다🎜🎜🎜 🎜네, 그렇게 작은 코드로 실제로 이렇게 많은 기능을 구현할 수 있다는 사실이 조금 신나지 않나요? 좋아요! BootstrapBlazor 구성 요소 라이브러리의 Table 구성 요소를 사용한 개발은 매우 간단합니다. 🎜🎜🎜Emphasis🎜🎜🎜테이블 구성 요소를 사용하세요. UI 수준의 기본 작업은 구성 요소 기능으로 캡슐화되었습니다. 개발자는 예제와 같이 데이터베이스 작업에만 에너지를 전달하면 됩니다. 🎜🎜OnQueryAsync 데이터 쿼리 방법 🎜🎜OnSaveAsync 데이터 저장 방법(삽입 또는 업데이트 작업을 수행하기 위한 기본 키를 내부적으로 자동 결정) 🎜🎜OnDeleteAsync 데이터 삭제 방법(실제 삭제 또는 표시 삭제 작업은 직접 수행 가능)🎜🎜OnResetSearchAsync 검색 방법 재설정🎜🎜🎜🎜구현 원칙 span>🎜 🎜🎜Table 구성 요소는 TItem을 통해 바인딩 모델 유형을 BindItem 엔터티 클래스로 설정합니다. 엔터티 클래스에서 AutoGenerateColumnAttribute 태그를 전달하면 자동으로 열을 생성하기 위한 규칙이 설정됩니다. 특정 매개변수는 다음과 같습니다. 🎜rrreee🎜 제한할 수 있는 매개변수가 많이 있습니다. 알다. 더 많은 문서를 보려면 온라인 데모 문서(https://www.blazor.zone/tables/column🎜🎜)를 참조하세요. 부트스트랩에 대한 자세한 내용은 🎜bootstrap tutorial🎜을 참조하세요! ! 🎜

위 내용은 Bootstrap Blazor 테이블 구성 요소의 자동 열 생성 기능에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!