Analisis ringkas fungsi penjanaan lajur automatik bagi komponen Jadual dalam Bootstrap Blazor

Lajur Bootstrap berikut akan membawa anda melalui komponen Jadual dalam Bootstrap Blazor dan memperkenalkan fungsi penjanaan lajur automatik bagi komponen Jadual.

Bootstrap Blazor ialah perpustakaan komponen UI peringkat perusahaan yang disesuaikan dengan peranti mudah alih dan menyokong pelbagai penyemak imbas arus perdana Ia telah digunakan dalam berbilang projek penghantaran. Set komponen ini boleh memendekkan kitaran pembangunan dan menjimatkan kos pembangunan. Lebih daripada 70 komponen telah dibangunkan dan dibungkus setakat ini.

• Alamat sumber terbuka Gitee ialah: https://gitee.com/LongbowEnterprise/BootstrapBlazor

• Alamat sumber terbuka Github ialah: https:/ /github .com/ArgoZhang/BootstrapBlazor
  

• Tapak web demo dalam talian: https://www.blazor.zone

Table sepatutnya Ia adalah komponen teras untuk pembangunan laman web pengurusan Banyak fungsi boleh diperolehi melalui Table Memandangkan hampir tiada publisiti tentang set komponen ini, tidak ramai yang mengetahuinya, tetapi ramai rakan menggunakan sumber terbuka yang lain. blazer selepas projek itu, didapati bahawa komponen Table tidak boleh digunakan sama sekali.

• Memuatkan data terlalu perlahan
• Terlalu banyak fungsi yang hilang

Jadi mulai hari ini, saya secara rasmi akan memperkenalkan perpustakaan komponen BootstrapBlazor dengan prestasi meletup dan operasi mudah. ​​Komponen raja yang paling berkuasa dalam Table, kerana terdapat banyak fungsi, terdapat hampir 60 fungsi dalam laman web semasa yang diperlukan dalam pertempuran sebenar, kami akan memperkenalkannya oleh satu

Menjana fungsi lajur secara automatik

Apabila menggunakan komponen Table, kebanyakan komponen memerlukan pengguna memasukkan lajur yang hendak dipaparkan, yang akan ditambahkan pada fail razor Sebilangan besar maklumat berkaitan lajur, seperti yang ditunjukkan di bawah

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

Jika terdapat terlalu banyak atribut kelas entiti. Ia akan menjadi sangat panjang untuk menulis di sini BootstrapBlazor Komponen Table perpustakaan komponen mempunyai atribut AutoGenerateColumns Apabila nilainya ditetapkan kepada true, maklumat lajur akan dijana secara automatik berdasarkan atribut model terikat, kerana Pembangun menyimpan banyak kod Bagaimana pula dengan melihat contoh

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

dahulu? Melalui baris kod ini, jadual dijana sepenuhnya secara automatik, dan semua fungsi seperti menambah, memadam, mengubah suai, menyemak, menapis, menyusun, dan lain-lain disediakan. Rendering adalah seperti berikut

Adakah anda agak teruja bahawa jumlah kod yang begitu kecil sebenarnya boleh mencapai begitu banyak fungsi? Betul! Membangunkan BootstrapBlazor komponen menggunakan pustaka komponen Table adalah sangat mudah.

Sorotan

PenggunaanTable Operasi asas pada tahap UI komponen telah dirangkumkan ke dalam fungsi komponen dan pembangun hanya perlu mengalihkan tenaga mereka kepada operasi pangkalan data. , seperti

• OnQueryAsync dalam contoh kaedah pertanyaan data
• OnSaveAsync Kaedah penjimatan data (menentukan kunci utama secara automatik secara dalaman untuk melaksanakan operasi sisipan atau kemas kini) <🎜. >
• Kaedah pemadaman data (anda boleh melakukan pemadaman sebenar atau tandakan pemadaman sendiri) OnDeleteAsync
• Tetapkan semula kaedah carian OnResetSearchAsync

Pelaksanaan prinsip< Komponen 🎜>

ialah komponen generik Gunakan

untuk menetapkan jenis model pengikat kepada kelas entiti Table Dalam kelas entiti ini, gunakan TItem tag untuk menjana peraturan lajur secara automatik, parameter khusus adalah seperti berikut: BindItemAutoGenerateColumnAttribute

Terdapat sejumlah besar parameter yang boleh dihadkan, lihat sahaja komen untuk mengetahui. Untuk dokumentasi lanjut, sila lihat dokumen demonstrasi dalam talian https://www.blazor.zone/tables/column

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

Untuk pengetahuan lanjut tentang bootstrap, sila lawati:

tutorial bootstrap

! !

Atas ialah kandungan terperinci Analisis ringkas fungsi penjanaan lajur automatik bagi komponen Jadual dalam Bootstrap Blazor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!