ホームページ > 記事 > ウェブフロントエンド > Bootstrap Blazor のテーブル コンポーネントの自動列生成機能の簡単な分析
次の Bootstrap 列では、BootstrapBlazor の Table コンポーネントについて説明し、Table コンポーネントの自動列生成機能を紹介します。
Bootstrap Blazor は、モバイル デバイスに適合し、さまざまな主流ブラウザーをサポートするエンタープライズ レベルの UI コンポーネント ライブラリであり、複数の配信プロジェクトで使用されています。このコンポーネントのセットにより、開発サイクルが大幅に短縮され、開発コストが節約されます。これまでに 70 を超えるコンポーネントが開発され、パッケージ化されています。
Gitee オープン ソース アドレス: https://gitee.com/LongbowEnterprise/BootstrapBlazor
Github オープン ソース アドレス: https:/ /github .com/ArgoZhang/BootstrapBlazor
オンライン デモ Web サイト: https://www.blazor.zone
#Table
は管理用 Web サイト開発の中核となるコンポーネントです。Table
から多くの機能を派生できます。このコンポーネント一式はほとんど宣伝されていないため、あまり知られていませんが、しかし、多くの友人 他のオープンソース blazor プロジェクトをいくつか使用した後、Table
コンポーネントがまったく使用できないことがわかりました。
ということで今日から性能爆発と簡単操作を正式導入しますBootstrapBlazor
コンポーネントライブラリの最強の王様コンポーネント Table
関数が多すぎて、実戦で必要な関数が現在のWebサイトに60個近くあります。
列関数を自動的に生成します
Table
コンポーネントを使用する場合、ほとんどのコンポーネントは表示のためのユーザー入力 これらの列。エンティティ クラスの属性が多すぎる場合、以下に示すように、列関連の多くの情報が razor
ファイルに追加されます。
コンポーネント ライブラリの Table
コンポーネントには、プロパティ AutoGenerateColumns
があり、その値が true に設定されている場合、
の場合、バインドされたモデルの属性に基づいて列情報が自動的に生成され、開発者は多くのコードを節約できます。まず <pre class="brush:html;toolbar:false;"><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"></pre>
の例を見てみてはいかがでしょうか?このコード行により、テーブルが完全に自動的に生成され、追加、削除、変更、チェック、フィルタリング、並べ替えなどのすべての機能が提供されます。レンダリングは次のとおりです
#これほど少量のコードで実際に非常に多くの機能を実現できることに、少し興奮しませんか?それは正しい!
BootstrapBlazor コンポーネント ライブラリを使用して Table
コンポーネントを開発するのは非常に簡単です。
使用
テーブル コンポーネント UI レベルの基本操作はコンポーネント関数にカプセル化されているため、開発者はエネルギーを移すだけで済みます。例の
実装原則
表 コンポーネントは汎用コンポーネントであり、## によって設定されます。 #TItem バインディング モデル タイプは、
BindItem エンティティ クラスに設定されます。このエンティティ クラスでは、自動生成された列ルールが
AutoGenerateColumnAttribute タグを通じて設定されます。特定のパラメータは次のとおりです。次のように:
<Table TItem="BindItem" IsStriped="true" IsBordered="true" IsMultipleSelect="true" ShowToolbar="true" ShowExtendButtons="true" AutoGenerateColumns="true" OnQueryAsync="@OnEditQueryAsync" OnResetSearchAsync="@OnResetSearchAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync"> </Table>
here 制限できるパラメータは多数あります。コメントを参照してください。その他のドキュメントについては、オンライン デモ ドキュメントを参照してください。https://www.blazor.zone/tables/column
ブートストラップの詳細については、bootstrap チュートリアル
を参照してください。 !以上がBootstrap Blazor のテーブル コンポーネントの自動列生成機能の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。