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 ファイルに追加されます。

BootstrapBlazor

コンポーネント ライブラリの Table コンポーネントには、プロパティ AutoGenerateColumns があり、その値が true に設定されている場合、 の場合、バインドされたモデルの属性に基づいて列情報が自動的に生成され、開発者は多くのコードを節約できます。まず <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">&lt;TableColumn @bind-Field=&quot;@context.DateTime&quot; Width=&quot;180&quot; /&gt; &lt;TableColumn @bind-Field=&quot;@context.Name&quot; /&gt; &lt;TableColumn @bind-Field=&quot;@context.Address&quot; /&gt; &lt;TableColumn @bind-Field=&quot;@context.Education&quot; /&gt; &lt;TableColumn @bind-Field=&quot;@context.Count&quot; /&gt; &lt;TableColumn @bind-Field=&quot;@context.Complete&quot;&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> の例を見てみてはいかがでしょうか?このコード行により、テーブルが完全に自動的に生成され、追加、削除、変更、チェック、フィルタリング、並べ替えなどのすべての機能が提供されます。レンダリングは次のとおりです

#これほど少量のコードで実際に非常に多くの機能を実現できることに、少し興奮しませんか?それは正しい！

BootstrapBlazor

コンポーネント ライブラリを使用して Table コンポーネントを開発するのは非常に簡単です。

キーポイント

使用

テーブル

コンポーネント UI レベルの基本操作はコンポーネント関数にカプセル化されているため、開発者はエネルギーを移すだけで済みます。例の

OnQueryAsync
• などのデータベース操作、データ クエリ メソッド
OnSaveAsync
• データ保存メソッド (主キーを自動的に決定する)内部で実行）挿入または更新操作）
OnDeleteAsync
• データ削除方法（実際の削除またはマーク削除操作を自分で実行できます）
OnResetSearchAsync
• 検索メソッドのリセット

実装原則

表

コンポーネントは汎用コンポーネントであり、## によって設定されます。 #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 サイトの他の関連記事を参照してください。