Bootstrap Blazor 테이블 구성 요소의 자동 열 생성 기능에 대한 간략한 분석-부트스트랩 튜토리얼-php.cn

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

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>에 표시됩니다. 아래와 같이 파일에 많은 열 관련 정보를 추가합니다.🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">로그인 후 복사</div></div>🎜엔티티 클래스의 속성이 너무 많은 경우. 여기에 작성하면 매우 길어집니다. <code>BootstrapBlazor

Table

BootstrapBlazor

Table

테이블

OnQueryAsync

OnSaveAsync

OnDeleteAsync

OnResetSearchAsync

구현 원칙 span>🎜 🎜🎜Table 구성 요소는 TItem을 통해 바인딩 모델 유형을 BindItem 엔터티 클래스로 설정합니다. 엔터티 클래스에서 AutoGenerateColumnAttribute 태그를 전달하면 자동으로 열을 생성하기 위한 규칙이 설정됩니다. 특정 매개변수는 다음과 같습니다. 🎜rrreee🎜 제한할 수 있는 매개변수가 많이 있습니다. 알다. 더 많은 문서를 보려면 온라인 데모 문서(https://www.blazor.zone/tables/column🎜🎜)를 참조하세요. 부트스트랩에 대한 자세한 내용은 🎜bootstrap tutorial🎜을 참조하세요! ! 🎜

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