Grid

Grid コンポーネントは大量の複雑なデータをタブ形式で表示し、ユーザーがブラウジングやインタラクティブに操作することにより、フィルタリング、並べ替え、ページングなどが可能です。Grid は、Ignite UI for Angular Grid コンポーネントと視覚的に同じものです。

Grid デモ

シンボルからデタッチ

Grid は、基本的に表形式でデータを表示する列と行のリピーターです。従って Generic Grid をアートボードにドラッグして一番上を右クリックし、コンテキスト メニューの下にある Detach from Symbol オプションを選択します。新しく表示される Grid/Generic Grid グループの下のレイヤー パネルには以下があります。

レイヤー 使用
🚫 igx-grid 禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください。
Header ヘッダーのすべてのセルを取得します。
Body ボディのすべてのセルを含みます。

デタッチ後、すでに作成したデータの最初の行を複製し、多数のヘッダーを必要なだけ追加してデータのすべてのディメンションを表示できます。

セル タイプ

Grid は、異なるデータ可視化用に 3 タイプのセルがあります。Header Cell は、各列に 1 つ、グリッドの一番上に表示され、特定の列のデータに関する説明をテキストで表示します。Body Cell は、データ レコードを表示するテーブルのビルドその他に使用されます。Summary Cell は、列集計がカウント、最大、最小などの各ディメンションに表示される Grid の下のセクションを作成するために使用されます。

項目 (ヘッダー セル)

Grid Header Cell は、項目のオーバーライドで次のレイアウトの組み合わせをサポートします。ヘッダー テキストのみを表示するアイコンはなく、ヘッダー テキストとフィルター アイコンを表示するアイコン、ヘッダーテキストを表示するアイコン、フィルターアイコンと並べ替えアイコンがあります。

状態 (本体セル)

Grid Body Cell は、以下のインタラクティブな状態 (標準状態の Rest、セル選択モードで選択したセルの CellSelected、選択セルのある行の残りのセルの RowSelected) をサポートします。

セル タイプ

Grid Header Cell は、対応が必要な一般的なデータ型のプリセットが 3 つ (数値のための Number、文字列の Text、最初の列の通常テンプレートとして使用される Checkbox、複数行の選択が可能にする最初の列のテンプレート) あります。

Grid Body Cell は、Header Cell などの同じ一般的なデータ型プリセットを提供します。

スタイル設定

Grid は、さまざま状態の各セル テキスト、アイコン、背景色のスタイル設定や水平および垂直の境界線の非表示など柔軟に変更できます。

使用方法

Grid の最も重要な点は、Header および Body Cells 内のデータの配置です。テキストは常に左揃えにして変数空スペースを右に残し、数値は常に右揃えにして変数空スペースを左に残します。

良い例 悪い例

コード生成

Grid の色またはフォントを指定した場合、Grid HTML 要素は div でラップされます。ブラウザーによってネスト コンポーネント (他のコンポーネント内のコンポーネント) のスタイル設定が必要になります。グリッドを使用するためにデタッチ シンボルに設定する必要があります。グリッドの幅が列の幅を合計して決定されます。グリッドのコンテナーに高さを設定しない場合も行を正しく描画するためにグリッドの高さが null 値に設定されます。

データ バインディング

データ バインディングは波括弧構文によって指定されます。例: {isAdmin}。テキスト フィールド (DataProperty および DataSource 以外) も文字列補間構文をサポートします。例: 管理者: {isAdmin}。データ バインディングはネストまたはネストなしが可能です。ターゲット プロパティがネストされたプロパティの場合、ネストされたプロパティ チェーンを含みますがモデル オブジェクト名は含みません。実例:

ネストなし

Customer {
  imageName: String;
}

DataProperty: {imageName}

ネストあり

Profile {
  imageName: String;
}

Customer {
  profile: Profile;
}

DataProperty: {profile.imageName}

データ ソース プロパティ

🕹️DataSource 値が提供された場合、グリッドのデータ ソースを構成するために使用されます。各列名がオブジェクトのプロパティであるオブジェクトの配列に設定する必要があります。データ ソースが設定されない場合、グリッドは列ヘッダーのみを描画します。

ヘッダー

Headers が提供された場合、描画する列数を決定します。Header を下にある Body (Cell) と一致させるために列を作成します。一致する Body が見つからない場合、列は Header の情報に基づいて作成され、一致が見つかった場合は、情報が Header から取得され、次に Body/Cell から取得されます。

テキスト

Header の Text プロパティにテキスト、バインディング、または両方を含むことができます。例:

  • 設定
  • {settingsLabel}
  • 重要な {labelText}

並べ替え

設定された場合、指定された列での並べ替えを有効にします。

フィルター状態

設定された場合、指定された列でのフィルタリングを有効にします。

設定された場合、列の型 (string、number、Boolean) を決定するために使用されます。

本体/セル

Bodies (セル) が提供された場合、描画する列の数を決定します。Header を Body (Cell) と一致しようとします。一致する Header が見つからない場合、列は Body/Cell の情報に基づいて作成されます。一致が見つかった場合、情報が Header から取得され、次に Body/Cell から取得されます。

データ プロパティ

🕹️DataProperty が提供された場合、列のフィールドを構成するために使用されます。列のフィールドは 🕹️DataSource のフィールドに相対します。

設定された場合、列の型 (string、number、Boolean) を決定するために使用されます。

その他のリソース

関連トピック:

コミュニティに参加して新しいアイデアをご提案ください。