カスタムグリッド
カスタムグリッドは、グリッドアイテムとしてグリッドアイテムコンポーネントを追加しカスタムすることが出来るコンポーネントです。
追加したコンポーネントからのアクションも実行可能です。
v3.4.0で追加されました。
| No | リストアイテムコンポーネント |
|---|---|
| 1 | テキスト入力 |
| 2 | テキストエリア |
| 3 | 数値入力 |
| 4 | 高精度数値 |
| 5 | 検索フィールド |
| 6 | パスワード入力 |
| 7 | セレクトボックス |
| 8 | コンボボックス |
| 9 | 日付ピッカー |
| 10 | 日時ピッカー |
| 11 | 時刻ピッカー |
| 12 | ラジオボタン |
| 13 | ラジオボタングループ |
| 14 | チェックボックス |
| 15 | チェックボックスグループ |
| 16 | スイッチ |
| 17 | レーティング |
| 18 | スライダー |
| 19 | ボタン |
| 20 | タイポグラフィー |
| 21 | リッチテキスト |
| 22 | イメージ |
| 23 | 外部リソース |
| 24 | リンク |
| 25 | ボックス |
| 26 | 区切り線 |
プロパティ
| No | 項目 | 入力値 | デフォルト値 | アクションプロパティ | タイプ | アクションデフォルト値 | 説明 |
|---|---|---|---|---|---|---|---|
| 1 | ID | 文字列 | 自動設定 | id | string | 自動設定 | [id]プロパティはアクションで設定はできません。 |
| 2 | 幅 | 文字列 | 672 390 [モバイル] | width | string | 672 390 [モバイル] | コンポーネントの幅 |
| 3 | 高さ | 文字列 | 672 570 [モバイル] | height | string | 672 570 [モバイル] | コンポーネントの高さ |
| 4 | X | 文字列 | x | string | X座標位置 | ||
| 5 | Y | 文字列 | y | string | Y座標位置 | ||
| 6 | 上 | 数値 | 10 | paddingTop | number | 10 | カスタムグリッドとグリッドアイテムとの上余白設定 マイナスの値はデフォルト値扱いになります |
| 7 | 右 | 数値 | 10 | paddingRight | number | 10 | カスタムグリッドとグリッドアイテムとの右余白設定 マイナスの値はデフォルト値扱いになります |
| 8 | 下 | 数値 | 10 | paddingBottom | number | 10 | カスタムグリッドとグリッドアイテムとの下余白設定 マイナスの値はデフォルト値扱いになります |
| 9 | 左 | 数値 | 10 | paddingLeft | number | 10 | カスタムグリッドとグリッドアイテムとの左余白設定 マイナスの値はデフォルト値扱いになります |
| 10 | グリッドアイテム幅 | 数値 | 320 365 [モバイル] | gridItemWidth | number | 320 365 [モバイル] | グリッドアイテムの幅 空の場合はデフォルト値扱いになります |
| 11 | グリッドアイテム高さ | 数値 | 320 230 [モバイル] | gridItemHeight | number | 320 230 [モバイル] | グリッドアイテムの高さ 空の場合はデフォルト値扱いになります |
| 12 | 列数 | 数値 | 2 1 [モバイル] | cols | number | 2 1 [モバイル] | カスタムグリッドの列数 |
| 13 | 間隔 | 数値 | 10 | gap | number | 10 | グリッドアイテム同士の距離 |
| 14 | スクロールバー | 真偽 | OFF | scrollBar | boolean | false | ON: グリッドアイテムから配置したコンポーネントがはみ出した場合にスクロールバーを表示 OFF: グリッドアイテムから配置したコンポーネントがはみ出した場合にはみ出した部分を非表示 |
| 15 | 背景色 | 文字列 カラーピッカー | backgroundColor | string | カスタムグリッドの背景色 | ||
| 16 | 枠線 | 真偽 | OFF | border | boolean | false | カスタムグリッドの枠線の表示設定 |
| 17 | 枠線の幅 | 数値 | 1 | borderWidth | number | 1 | カスタムグリッドの枠線の幅 |
| 18 | 丸みサイズ | 数値 | 0 | roundedSize | number | 0 | カスタムグリッドの枠線の丸み |
| 19 | 枠線の色 | 文字列 カラーピッカー | borderColor | string | カスタムグリッドの枠線の色 | ||
| 20 | 枠線の不透明度 | 数値 | 100 | borderOpacity | number | 100 | カスタムグリッドの枠線の不透明度 |
| 21 | 枠線スタイル | 選択 1. 通常 2. 破線 3. 点線 | 通常 | borderStyle | string | solid | カスタムグリッドの枠線のスタイル |
| 22 | グリッドアイテム背景色 | 文字列 カラーピッカー | gridItemBackgroundColor | string | グリッドアイテムの背景色 | ||
| 23 | グリッドアイテム枠線 | 真偽 | ON | gridItemBorder | boolean | true | グリッドアイテムの枠線の表示設定 |
| 24 | グリッドアイテム枠線の幅 | 数値 | 1 | gridItemBorderWidth | number | 1 | グリッドアイテムの枠線の幅 |
| 25 | グリッドアイテム丸みサイズ | 数値 | 0 | gridItemRoundedSize | number | 0 | グリッドアイテムの枠線の丸み |
| 26 | グリッドアイテム枠線の色 | 文字列 カラーピッカー | gridItemBorderColor | string | グリッドアイテムの枠線の色 | ||
| 27 | グリッドアイテム枠線の不透明度 | 数値 | 100 | gridItemborderOpacity | number | 100 | グリッドアイテムの枠線の不透明度 |
| 28 | グリッドアイテム枠線のスタイル | 選択 1. 通常 2. 破線 3. 点線 | 通常 | gridItemborderStyle | string | solid | グリッドアイテムの枠線のスタイル |
| 29 | 浮き上がり | 数値 | 0 | elevation | number | 0 | グリッドアイテムのz方向の高さ |
| 30 | 表示 | 真偽 | ON | visibility | boolean | true | コンポーネントの表示設定 |
| 31 | 値 | 表形式[詳細1] | value | array of object | カスタムグリッドの値 | ||
| 32 | クリックイベント | 選択 1. なし 2. アクション | アクション | [クリックイベントなしの場合]グリッドアイテムコンポーネント内のアクションのみ有効になります。 [クリックイベント アクションの場合]グリッドセルクリック時のアクションのみ有効となります。 | |||
| 33 | 選択値 | selected | object | 選択されているグリッドアイテムのデータ[selected]プロパティはアクションで設定はできません。 |
[詳細1] 値 (value)
カスタムグリッドの表全体の値を取得・設定します。値の形式は行を示すオブジェクトの配列です。
デフォルトの状態は以下のように登録されています。[行追加]ボタンから各行を登録します。
削除する場合は、チェックボックスを選択して、[削除]ボタンをクリックします
| text_field_1 | button_1 | rating_1 |
|---|---|---|
| Text_1 | Button_1 | 5 |
| Text_2 | Button_2 | 3 |
| Text_3 | Button_3 | 4 |
| Text_4 | Button_4 | 5 |
アクションでデータを扱う場合は以下の例のようにオブジェクトの配列形式で値 (value) に設定するとカスタムグリッドの各コンポーネントにデータを表示できます。同様に値 (value) にはテーブルの現在の表示データの状態がオブジェクトの配列形式で入っています。
[ {"button_1":"Button_1","text_field_1":"Text_1","rating_1":"5"}, {"button_1":"Button_2","text_field_1":"Text_2","rating_1":"3"}, {"button_1":"Button_3","text_field_1":"Text_3","rating_1":"4"}, {"button_1":"Button_4","text_field_1":"Text_4","rating_1":"5"}]| No | リストアイテムコンポーネント | 対応するプロパティ |
|---|---|---|
| 1 | テキスト入力 | value |
| 2 | テキストエリア | value |
| 3 | 数値入力 | value |
| 4 | 高精度数値 | value |
| 5 | 検索フィールド | value |
| 6 | パスワード入力 | value |
| 7 | セレクトボックス | value |
| 8 | コンボボックス | value |
| 9 | 日付ピッカー | value |
| 10 | 日時ピッカー | value |
| 11 | 時刻ピッカー | value |
| 12 | ラジオボタン | value |
| 13 | ラジオボタングループ | value |
| 14 | チェックボックス | value |
| 15 | チェックボックスグループ | value |
| 16 | スイッチ | value |
| 17 | レーティング | value |
| 18 | スライダー | value |
| 19 | ボタン | label |
| 20 | タイポグラフィー | value |
| 21 | リッチテキスト | value |
| 22 | イメージ | value |
| 23 | 外部リソース | value |
| 24 | リンク | label |
| 25 | ボックス | - |
| 26 | 区切り線 | - |
[詳細2]グリッドアイテムのアクションからクリックしたグリッドアイテムを取得する場合
カスタムグリッドのクリックアクションとグリッドアイテム内のコンポーネントのアクションでは、イベントが発生したグリッドアイテムを選択値(selected)プロパティによって取得できます。
選択値(selected)は選択したグリッドアイテムデータを取得することができるプロパティとなります。
カスタムグリッドのイベントで、選択値(selected)プロパティにより1つのグリッドアイテムオブジェクトが取得できます。
イベント
| イベント名 | 説明 |
|---|---|
| onclick | グリッドアイテムをクリックした際に発生します。 |