データグリッド

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

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	自動設定	id	string	自動設定	`[id]`プロパティはアクションで設定はできません。
2	幅	数値	565	width	number	565	コンポーネントの幅
3	高さ	数値	230	height	number	230	コンポーネントの高さ
4	X	数値		x	number		X座標位置
5	Y	数値		y	number		Y座標位置
6	セル編集	真偽	ON	editable	boolean	true	セルの編集可否
7	ワンクリック編集	真偽	OFF	oneClickEdit	boolean	true	ワンクリックでの編集可否
8	ページネーション	真偽	OFF	pagination	boolean	false	ページネーション機能の有効/無効
9	表示	真偽	ON	visibility	boolean	true	コンポーネントの表示/非表示
10	XLSX 出力	真偽	OFF	exportToXlsxButton	boolean	false	XLSX出力ボタンの表示/非表示
11	選択	選択 1.行 2.セル 3.複合 4.なし	行	selection	string	row	選択モードの設定
12	ヘッダーアジャスト	選択 1.All 2.Header 3.Data 4.Off	Off				ヘッダーの自動調整設定
13	ヘッダー行の高さ	数値	40	headerRowHeight	number		ヘッダー行の高さ
14	ヘッダーフォントサイズ	数値	14	headerFontSize	number	14	ヘッダーのフォントサイズ
15	ヘッダーワードラップ	選択 1.通常 2.Off	Off	headerWordWrap	string	Off	ヘッダーのワードラップ設定
16	ラベル色	文字列カラーピッカー		labelColor	string		ラベルの文字色
17	ヘッダー色	文字列カラーピッカー		headerColor	string		ヘッダーの背景色
18	行追加	真偽	ON	addButton	boolean	true	行追加ボタンの表示/非表示
19	行削除	真偽	ON	deleteButton	boolean	true	行削除ボタンの表示/非表示
20	偶数行の背景色	文字列カラーピッカー `[詳細6]`		evenBackgroundColor	string		偶数行の背景色 `[v3.3.0]`で追加されたプロパティ
21	奇数行の背景色	文字列カラーピッカー `[詳細6]`	#f7f7f7	oddBackgroundColor	string	#f7f7f7	奇数行の背景色 `[v3.3.0]`で追加されたプロパティ
22	行スタイル	JSON `[詳細6]`	[]	rowStyle	array of object	[]	行ごとのスタイル指定 `[v3.3.0]`で追加されたプロパティ
23	セルスタイル	JSON `[詳細6]`	[]	cellStyle	array of object	[]	セルごとのスタイル指定 `[v3.3.0]`で追加されたプロパティ
24	フッター	真偽	OFF	footer	boolean	false	フッターの表示/非表示
25	リサイズ	真偽	OFF	resizable	boolean	false	リサイズ機能の有効/無効
26	左分割	数値	0	leftSplit	number	0	左分割の列数
27	ページサイズ	数値	100	pageSize	number	100	1ページあたりの表示行数
28	値	表形式 `[詳細1]`	`[詳細1]`	value	array of object	`[詳細1]`	データグリッドの値
29	ページイベント	選択 1.なし 2.アクション	なし				ページ変更時のイベント設定
30	ページインデックス			pageIndex	number		現在のページインデックス
31	前にアクティブだったページインデックス			pagePreviousIndex	number		前のページインデックス
32	全ページのレコード件数			totalCount	number		全レコード数
33	選択値			selected	object		選択されている行のデータ
34	削除値			deleted	array of object		削除された行のデータ

[id],[pagePreviousIndex],[selected]プロパティはアクションで設定はできません。
[rowStyle],[cellStyle]プロパティはアクションで値の取得はできません。
ヘッダーアジャストの指定がある場合にセル幅については自動的に調節されます。Offの場合は、データグリッドカラムの幅プロパティにて設定が可能です。
ヘッダーワードラップの設定は、ヘッダーアジャストが「Off」の場合のみ有効となります。
- 通常（折り返さない）
- Off（折り返さない）
ヘッダーワードラップはアクションから以下の値を設定することが出来ます。
- normal
- 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"
  }
]

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

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

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

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

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

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

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

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

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

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

分類	特徴	ダイアログプロパティ	アクション		データグリッド機能					利用シーンの例
		プロパティの設定	初期表示や検索のアクションで設定する内容	ページイベントアクションで設定する内容	ソート	フィルタリング	セルの編集	行の追加	行の削除
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形式のファイルをエクスポートするボタンは表示されますが、出力したデータはサポート外になります。

[詳細6] データグリッドスタイル

以下のプロパティを利用することで、偶数行、奇数行および各行、各セルにスタイルを適用することが出来ます。
また、アクションと組み合わせることで、特定の条件のみスタイルを変更する動作などを実現することが出来ます。

[偶数行の背景色]
[奇数行の背景色]
[行スタイル]
[セルスタイル]

偶数行の背景色/奇数行の背景色の設定方法

偶数行の背景色/奇数行の背景色は、文字列またはカラーピッカーで背景色を指定します。
アクションで設定する場合は、[evenBackgroundColor]/[oddBackgroundColor]アクションプロパティに文字列で背景色を設定します。

$ui.<データグリッドID>.evenBackgroundColor = "red";
$ui.<データグリッドID>.oddBackgroundColor = "#039BE5"

行スタイル/セルスタイルの設定方法

行スタイル/セルスタイルは、以下のようにJSON形式でスタイルを設定します。

行スタイル：

[
  {"row": "0", "backgroundColor": "blue"},
  {"row": "1", "backgroundColor": "#ffffffff"}
]

セルスタイル：

[
  {"row": "0", "column": "month", "backgroundColor": "blue", "color": "white"},
  {"row": "1", "column": "companyA", "backgroundColor": "#ffffff", "color": "#039BE5"}
]

アクションで設定する場合は、[rowStyle]/[cellStyle]アクションプロパティにオブジェクト配列でスタイルを設定します。

$ui.<データグリッドID>.rowStyle = [
  {row: 0, backgroundColor: "blue"},
  {row: 1, backgroundColor: "#ffffffff"}
];

$ui.<データグリッドID>.cellStyle = [
  { row: 0, column: "month", backgroundColor: "blue", color: "white"},
  { row: 1, column: "companyA", backgroundColor: "#ffffff", color: "#039BE5"}
]

オブジェクトのプロパティについては以下の通りです。

設定先	オブジェクトプロパティ	説明
rowStyle	row	1. スタイルを設定する行を数値または文字列で指定する 2. 一番最初の行は0番目として扱われる
	backgroundColor	1. データグリッド行の背景色 2. 色名または6桁(8桁)のコードで指定する
cellStyle	row	1. スタイルを設定するセルの行を数値または文字列で指定する 2. 一番最初の行は0番目として扱われる
	column	1. スタイルを設定するセルの列をカラム ID で指定する
	color	1. データグリッドセルの文字色 2. 色名または6桁(8桁)のコードで指定する
	backgroundColor	1. データグリッドセルの背景色 2. 色名または6桁(8桁)のコードで指定する

設定されたスタイルをクリアする方法

設定先	設定する値	結果
evenBackgroundColorおよびoddBackgroundColor	以下のいずれかの値 1. null 2. ""	evenBackgroundColor, oddBackgroundColorがクリアされて、データグリッドに設定された偶数行と奇数行の背景色が消えます。
rowStyleおよびcellStyle	以下のいずれかの値 1. [] 2. null 3. ""	rowStyle, cellStyleがクリアされて、データグリッドに設定された行スタイルとセルスタイルが消えます。

イベント

なし