データグリッド

データグリッドは表データの表示および入力をするコンポーネントです。データグリッドは本体であるデータグリッドおよびカラム構成部品であるデータグリッドカラムによって構成されます。データグリッドカラムはデータグリッドのプロパティから任意に追加/削除できます。

Tips

Tips

• データグリッドはデスクトップアプリケーションのみで利用できるコンポーネントです。
• 大量のレコードを扱う場合、ペイロードの制限やクライアントへの負荷が大きくなります。一度に表示するレコード数が10,000以上になると不安定になる可能性があります。

プロパティ

UIダイアログ

項目	入力値	オプション	デフォルト値
ID	文字列		自動設定
ヘッダー色	文字列 カラーピッカー		#f7f7f7
幅	数値		565
高さ	数値		230
X	数値
Y	数値
ヘッダーアジャスト	選択	・All ・Header ・Data ・Off	Off
ヘッダーラップ	選択	・選択 ・Off	Off
ヘッダーフォントサイズ	数値		14
ヘッダー高さ	数値		40
セル編集	真偽	・オン ・オフ	オン
ワンクリック編集	真偽	・オン ・オフ	オフ
ページネーション	真偽	・オン ・オフ	オフ
表示	真偽	・オン ・オフ	オン
XLSX 出力	真偽	・オン ・オフ	オフ
選択	選択	・行 ・セル ・複合 ・なし	行
行追加	真偽	・オン ・オフ	オン
行削除	真偽	・オン ・オフ	オン
フッター	真偽	・オン ・オフ	オフ
リサイズ	真偽	・オン ・オフ	オフ
左分割	数値		0
ページサイズ	数値		100
値	表形式 [詳細1]		詳細1
ページイベント	選択	・なし ・アクション	なし

アクション

項目	プロパティ	データ型	オプション	デフォルト値
ID	id	string		自動設定
ヘッダー色	headerColor	string
幅	width	number		565
高さ	height	number		230
X	x	number
Y	y	number
ヘッダーアジャスト
ヘッダーワードラップ	headerWordWrap	string	off normal	Off
ヘッダーフォントサイズ	headerFontSize	number		14
ヘッダー高さ	headerRowHeight	number
セル編集	editable	boolean	・true ・false	true
ワンクリック編集	oneClickEdit	boolean	・true ・false	true
ページネーション	pagination	boolean	・true ・false	false
表示	visibility	boolean	・true ・false	true
XLSX 出力	exportToXlsxButton	boolean	・true ・false	false
選択	selection	string	・row ・cell ・complex ・none	row
行追加	addButton	boolean	・true ・false	true
行削除	deleteButton	boolean	・true ・false	true
フッター	footer	boolean	・true ・false	false
リサイズ	resizable	boolean	・true ・false	false
左分割	leftSplit	number		0
ページサイズ	pageSize	number		100
値	value	array of object
ページインデックス	pageIndex	number
前にアクティブだったページインデックス	pagePreviousIndex	number
全ページのレコード件数	totalCount	number
選択値	selected	object
削除値	deleted	array of object

Tips

Tips

• [id],[pagePreviousIndex],[selected]プロパティはアクションで設定はできません。
• ヘッダーに関するプロパティはアクションで利用できません。
• ヘッダーアジャストの指定がある場合にセル幅については自動的に調節されます。Offの場合は、データグリッドカラムの幅プロパティにて設定が可能です。
• ヘッダーラップの設定は、ヘッダーアジャストが「Off」の場合のみ有効となります。
  • 通常（折り返さない）
  • Off（折り返さない）
• セルはダブルクリックにより編集モードにできます。シングルクリックにも設定で可能です。
• ページネーションにより1ページ当たりのページ数を設定することができます。
• ページネーションをオンに設定した場合、行追加ボタンと行削除ボタンは付与されません。行追加プロパティと行削除プロパティの設定は無効になります。
• [XLSX 出力]をオンに設定した場合、データグリッドの上部にXLSX形式のファイルをエクスポートするボタンを表示します。
• XLSX形式のファイルエクスポートで出力されるデータについては、後述「[詳細5]XLSX形式のファイルエクスポートで出力されるデータ」を参照してください。
• ヘッダーフォントサイズの設定は、ヘッダーアジャストが「Off」の場合のみ有効となります。

[詳細1] 値 (value)

データグリッドの表全体の値を取得・設定します。値の形式は行を示すオブジェクトの配列です。
デフォルトの状態は以下のように登録されています。[行追加]ボタンから各行を登録します。
削除する場合は、削除する行をクリックし、[行削除] ボタンをクリックします。

<データグリッドID>_month	<データグリッドID>_companyA	<データグリッドID>_companyB	<データグリッドID>_companyC	<データグリッドID>_companyD
02	20	52	72	34
03	5	33	90	55
04	55	30	81	66
05	30	11	62	22

アクションでデータを扱う場合は以下の例のようにオブジェクトの配列形式で値 (value) に設定するとデータグリッドにデータ表示できます。同様に値 (value) にはデータグリッドの現在の表示データの状態がオブジェクトの配列形式で入っています。

[
  {"month":"02","companyA":20,"companyB":52,"companyC":72,"companyD":34,"id":"u1677456694544"},
  {"month":"03","companyA":5,"companyB":33,"companyC":90,"companyD":55,"id":"u1677456694545"},
  {"month":"04","companyA":55,"companyB":30,"companyC":81,"companyD":66,"id":"u1677456694546"},
  {"month":"05","companyA":30,"companyB":11,"companyC":62,"companyD":22,"id":"u1677456694547"}
]

Tips

Tips

• 行データの識別子(id)は、システム内部で使用するデータです。行データの識別子(id)は編集しないでください。
• データグリッドカラムの並び順の変更を行った場合、変更前に登録したデータと変更後に登録したデータでプロパティ画面に表示される値 (value)の表示に下記の違いがあります。ただし、オブジェクトのキーの並び順が異なるだけで、データグリッドに表示されるデータには影響はありません。
  • 変更前に登録していたデータは、オブジェクトのキーの並び順は変更前の順番になります。
  • 変更後に新規追加したデータは、オブジェクトのキーの並び順は変更後の順番になります。
• データグリッド上で行を追加、セル値を更新した場合、行ステータス($status)プロパティを値 (value)で取得することができます。$statusプロパティ値は下記の通りです。
  • 行を追加した場合：added
  • 行を更新した場合：updated
• 行ステータス($status)プロパティは内部で使用するステータスデータです。行ステータス($status)は編集しないでください。

[詳細2]データグリッド外部のアクションから更新する場合

各データグリッドカラムにアクションを設定せず、外部のボタンからデータグリッドの変更内容をまとめて更新したい場合、「行追加・行更新」と「行削除」で方法が異なります。

行追加・更新の場合
行追加・更新の場合は、値 (value)プロパティを使用します。
データグリッドカラムにアクションを設定し、 セル編集のたびにリクエストを送り更新する方法も可能ですが、この方法を用いるとリクエスト数の消費を抑えることができます。
値 (value)の各オブジェクトは行データを示しますが、その行データの識別子(id)とステータス ($status) を示す情報も付与されます。

操作	$status値
行追加	added
行更新	updated

Tips

Tips

行データの識別子(id)は、システム内部で使用するデータです。行データの識別子(id)は編集しないでください。

行削除の場合 行削除の場合は、削除値(deleted)プロパティを使用します。
削除値(deleted)プロパティは行削除が行われた行データを取得することができます。
データについては、$ui.data_grid.deletedのような指定で取得することが可能です。

Tips

Tips

削除値(deleted)プロパティは削除した行のオブジェクトをスタックしています。明示的にクリアしない限りデータが増え続けるため、削除値(deleted)プロパティにnull または 空配列[] を代入してクリアすることが必要になります。 例）$ui.data_grid.deleted=null、または$ui.data_grid.deleted=[]

[詳細3]データグリッドカラムのアクションから更新する場合

データグリッドカラムのアクションではイベント発生行を選択値(selected)プロパティによって取得できます。
選択値(selected)は、データグリッド内で選択されている行データを取得することができるプロパティとなります。
データグリッドカラムのイベントはカラムタイプによって変更イベント (onchange) と クリックイベント (onclick) が ありますが、いずれも選択値(selected)プロパティにより行オブジェクトが取得できます。

[詳細4]データのロード・表示別の分類

データのロードの分類、特徴、各分類にするための設定と各分類の時に使用できるデータグリッド機能については以下の通りです。

分類	特徴	UIダイアログ プロパティの設定	アクション 初期表示や検索のアクションで設定する内容	アクション ページイベントアクションで設定する内容	データグリッド機能 ソート	データグリッド機能 フィルタリング	データグリッド機能 セルの編集	データグリッド機能 行の追加	データグリッド機能 行の削除	利用シーンの例
Bulk Loading	データを一括取得し、全て表示する	ページネーション: オフ	value=表示する全てのデータ	-	○	○	○	○	○	行の追加、削除を行いたい場合
Pagination (Bulk Loading)	データを一括取得し、ページ毎に表示する	ページネーション: オン	value=表示する全てのデータ	-	○	○	○	-	-	表示する行数が多いがスクロールは極力避けたい場合
Pagination (Lazy Loading)	データをページ毎に取得し、ページ毎に表示する	ページネーション: オン ページイベント: アクション	value=1ページ分のデータ totalCount=表示する全てのデータの行数	value=1ページ分のデータ	-	-	-	-	-	アクションでやり取りするデータ量を少なくしたい場合

Pagination (Lazy Loading) 時の注意点

• ロード済みのページを再表示した際、アクションは実行されません。
• アクションで設定した値が下記の場合、新規一覧の1ページ目のデータとして扱われます。
  • pageIndexに0、valueに新規データを設定した場合
  • totalCountが変更された場合

[詳細5] XLSX形式のファイルエクスポートで出力される

データのロードの分類「Bulk Loading」「Pagination (Bulk Loading)」の場合

• データグリッドにバインドしている全てのデータが出力されます。
• フィルタでデータを抽出した場合、抽出したデータが出力されます。
• フッターを設定している場合は、一番下に出力した全データを対象にしたフッター情報が出力されます。

データのロードの分類「Pagination (Lazy Loading)」の場合

• XLSX形式のファイルをエクスポートするボタンは表示されますが、出力したデータはサポート外になります。

イベント

なし