Web Components Grid の行操作
Web Components Grid の Ignite UI for Web Components 行操作機能を使用すると、開発者は ActionStrip を使用し、行/セル コンポーネントと行のピン固定に CRUD を利用できます。これらの操作 (編集とピン固定) には、IgcGrid の特定の行に適用できる事前定義された UI コントロールがいくつかあります。
使用方法
事前定義された操作 (actions) UI コンポーネントは次のとおりです:
-
GridEditingActions-IgcGrid編集専用に設計された機能と UI を含みます。RowEditableオプションとIgcGridの行削除に応じて、セルまたは行の編集モードをすばやく切り替えることができます。 -
GridPinningActions-IgcGridピン固定専用に設計された機能と UI を含みます。行をすばやくピン固定し、ピン固定された行とその無効な行の間を移動できます。
これらは IgcGrid 内に追加され、デフォルトのインタラクションを提供する ActionStrip プを持つために必要です。
IgcActionStripComponent が IgcGrid の子コンポーネントの場合、行をホバーすると UI が自動的に表示されます。
カスタムの実装
これらのコンポーネントは、カスタマイズのための柔軟性を提供するテンプレートを公開します。たとえば、delete、edit などの行アクションがある Gmail シナリオで ActionStrip を使用する場合、アイコンでボタン コンポーネントを作成します。そして、クリック イベントを追加し、ActionStrip に挿入します。
<igc-grid>
<igc-action-strip #actionstrip>
<igc-grid-pinning-actions></igc-grid-pinning-actions>
<igc-grid-editing-actions edit-row="true" delete-row="true"></igc-grid-editing-actions>
</igc-action-strip>
</igc-grid>
API リファレンス
IgcGrid
GridPinningActions
GridEditingActions