Interops
Angular
Grid
5.20241.9
wijmo.angular.grid Class WjFlexGrid Wijmo API クラス

WjFlexGrid クラス

FlexGrid コントロール用のAngularJSディレクティブ。

wj-flex-grid ディレクティブを使用して、AngularJSアプリケーションにグリッドを追加できます。 ディレクティブ名とパラメーター名の書式は、キャメルケースではなくダッシュで結んだ小文字にする必要があります。 次に例を示します。

<p>FlexGrid コントロールの例：</p>
<wj-flex-grid items-source="data">
  <wj-flex-grid-column
    header="Country"
    binding="country">
  </wj-flex-grid-column>
  <wj-flex-grid-column
    header="Sales"
    binding="sales">
  </wj-flex-grid-column>
  <wj-flex-grid-column
    header="Expenses"
    binding="expenses">
  </wj-flex-grid-column>
  <wj-flex-grid-column
    header="Downloads"
    binding="downloads">
  </wj-flex-grid-column>
</wj-flex-grid>

この例では、FlexGridコントロールを作成し、それをコントローラから公開されている'data'配列に連結しています。 グリッドには3つの列があり、それぞれが ソース配列に含まれるオブジェクトの1つのプロパティに対応しています。

デモ

wj-flex-grid ディレクティブは、次の属性をサポートします。

allow-add-new
@ ユーザーがソースコレクションに項目を追加できるように、 新しい行テンプレートを表示するかどうかを示す値。
allow-delete
@ ［Del］キーが押されたときに、グリッドで 選択されている行を削除するかどうかを示す値。
allow-dragging
@ ユーザーがマウスを使用して行と列をドラッグできるかどうかと、 その方法を示す AllowDragging 値。
allow-merging
@ グリッドのどの部分がセル結合を提供するかを 示す AllowMerging 値。
allow-resizing
@ ユーザーがマウスを使用して行と列を サイズ変更できるかどうかを示す AllowResizing 値。
allow-sorting
@ ユーザーが列ヘッダーをクリックして 列をソートできるかどうかを示すboolean値。
auto-generate-columns
@ グリッドが items-source に基づいて 列を自動的に生成するかどうかを示すboolean値。
child-items-path
@ 階層グリッドで子の行を生成するために使用される プロパティの名前（異なる階層レベルにある項目の子項目に異なる名前を 使用する場合は、プロパティ名の配列）。
control
= このディレクティブによって作成された FlexGrid コントロールへの参照。
defer-resizing
= ユーザーがマウスボタンを放すまで行と列のサイズ変更を 遅延するかどうかを示すboolean値。
frozen-columns
@ グリッド内の固定（スクロール不可能）列の数。
frozen-rows
@ グリッド内の固定（スクロール不可能）行の数。
group-header-format
@ グループヘッダーコンテンツの作成に使用される 書式文字列。
headers-visibility
= 行ヘッダーと列ヘッダーを表示するかどうかを示す HeadersVisibility 値。
ime-enabled
@ 編集モードでないときに、グリッドがIME（Input Method Editor）を サポートするかどうかを決定する値を取得または設定します。
initialized
& このイベントは、属性値でコントロールを初期化して連結処理が完了した後に発生します。
is-initialized
= 属性値でコントロールを初期化して連結処理が完了したかどうかを示す値。
item-formatter
= このグリッドのセルをカスタマイズする関数。
items-source
= グリッドに表示される項目を含む配列または ICollectionView オブジェクト。
is-read-only
@ ユーザーがグリッドセルにキー入力して編集でき ないようにされているかどうかを示すboolean値。
merge-manager
= 指定されたセルの結合範囲を指定する MergeManager オブジェクト。
selection-mode
@ ユーザーがセルを選択できるかどうかと、 その方法を示す SelectionMode 値。
show-groups
@ グループ行を挿入してデータグループを区切るかどうかを 示すboolean値。
show-sort
@ 列ヘッダーにソートインジケータを表示するかどうかを 示すboolean値。
sort-row-index
@ 現在のソートを表示および変更する、列ヘッダーパネル内の 行のインデックスを指定する数値。
tree-indent
@ 異なるレベルの行グループをオフセットするために 使用されるインデント（ピクセル単位）。
beginning-edit
& FlexGrid.beginningEdit イベント。
cell-edit-ended
& FlexGrid.cellEditEnded イベントのハンドラ。
cell-edit-ending
& FlexGrid.cellEditEnding イベントのハンドラ。
prepare-cell-for-edit
& FlexGrid.prepareCellForEdit イベントのハンドラ。
resizing-column
& FlexGrid.resizingColumn イベントのハンドラ。
resized-column
& FlexGrid.resizedColumn イベントのハンドラ。
dragged-column
& FlexGrid.draggedColumn イベントのハンドラ。
dragging-column
& FlexGrid.draggingColumn イベントのハンドラ。
sorted-column
& FlexGrid.sortedColumn イベントのハンドラ。
sorting-column
& FlexGrid.sortingColumn イベントのハンドラ。
deleting-row
& FlexGrid.deletingRow イベントのハンドラ。
dragging-row
& FlexGrid.draggingRow イベントのハンドラ。
dragged-row
& FlexGrid.draggedRow イベントのハンドラ。
resizing-row
& FlexGrid.resizingRow イベントのハンドラ。
resized-row
& FlexGrid.resizedRow イベントのハンドラ。
row-added
& FlexGrid.rowAdded イベントのハンドラ。
row-edit-ended
& FlexGrid.rowEditEnded イベントのハンドラ。
row-edit-ending
& FlexGrid.rowEditEnding イベントのハンドラ。
loaded-rows
& FlexGrid.loadedRows イベントのハンドラ。
loading-rows
& FlexGrid.loadingRows イベントのハンドラ。
group-collapsed-changed
& FlexGrid.groupCollapsedChanged イベントのハンドラ。
group-collapsed-changing
& FlexGrid.groupCollapsedChanging イベントのハンドラ。
items-source-changed
& FlexGrid.itemsSourceChanged イベントのハンドラ。
selection-changing
& FlexGrid.selectionChanging イベントのハンドラ。
selection-changed
& FlexGrid.selectionChanged イベントのハンドラ。
got-focus
& FlexGrid.gotFocus イベントのハンドラ。
lost-focus
& FlexGrid.lostFocus イベントのハンドラ。
scroll-position-changed
&FlexGrid.scrollPositionChanged イベントのハンドラ。

wj-flex-grid ディレクティブには、 wijmo.angular.grid.WjFlexGridColumn、 wijmo.angular.grid.WjFlexGridCellTemplate 、 wijmo.angular.grid.detail.WjFlexGridDetail の各子ディレクティブを入れることができます。

階層