Rumah >hujung hadapan web >Tutorial Bootstrap >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.
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) OnDeleteAsync
OnResetSearchAsync
Pelaksanaan prinsip
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: BindItem
AutoGenerateColumnAttribute
[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 bootstrapAtas 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!