SmartPad4i(Cobos4i)ではIBMiの5250アプリケーションのように複数段のサブファイル(テーブル)を作成することができます。HTML側では、tbodyタグを定義するだけでtbody内の複数あるtrタグが1行として認識されるため作成するのも簡単です。今回のTipsでは、複数段のサブファイル(テーブル)をSmartPad4iで定義する方法をご紹介します。
画面例 1行での表示
Tipsでは、1行で表現されているサブファイルを2行に変更します。
RPG側のロジックの変更は必要ありません。
サブファイルを複数行にする場合、HTML側の変更のみで実現できます。
HTMLの定義
1行で表示されている場合のHTMLは以下になります。
テーブルタグ内のtheadタグが見出し部分、tbodyが1行に対応しています。
<table border="1" id="TABLE" class="table is-fullwidth">
<thead>
<tr>
<td>詳細</td>
<td><A href="#" id="JSOR1">家賃</A></td>
<td class="is-hidden-mobile">敷金</td>
<td class="is-hidden-mobile">礼金</td>
<td><A href="#" id="JSOR2">間取り</A></td>
<td><A href="#" id="JSOR3">築年月</A></td>
<td class="is-hidden-mobile">最寄り駅</td>
<td class="is-hidden-mobile">住所</td>
</tr>
</thead>
<tbody>
<tr>
<td><a id="JLDET"><i class="fas fa-edit"></i></a>
<INPUT type="hidden" id="JMCOD"><INPUT type="hidden" id="JMTON"><INPUT type="hidden" id="JMRON">
</td>
<td id="JMKIN" align="right"></td>
<td id="JMSIK" align="right" class="is-hidden-mobile"></td>
<td id="JMREI" align="right" class="is-hidden-mobile"></td>
<td id="JMTYP"></td>
<td id="JMTIK"></td>
<td id="JMEKI" class="is-hidden-mobile"></td>
<td id="JMADD" class="is-hidden-mobile"></td>
</tr>
</tbody>
</table>2段表示に変更
SmartPad4i(Cobos4i)では、 thead タグ、tbodyタグを1行のサブファイルとして認識するため、theadタグ、tbodyタグ内に複数のtrタグを定義しても問題ありません。
HTML側の定義
複数段表示に対応したHTMLは以下になります。
緑色の文字の箇所が追加した属性値やstyleです。
RPG側は一切変更せずにHTML側の変更のみで表示を切り替えることができました。
<table border="1" id="TABLE" class="table is-fullwidth ">
<thead>
<tr>
<td rowspan="2" style="width:60px;vertical-align:middle">詳細</td>
<td><A href="#" id="JSOR1">家賃</A></td>
<td class="is-hidden-mobile">敷金</td>
<td class="is-hidden-mobile">礼金</td>
<td><A href="#" id="JSOR2">間取り</A></td>
<td><A href="#" id="JSOR3">築年月</A></td>
</tr>
<tr>
<td colspan="2" class="is-hidden-mobile" style="border-bottom:1px solid #CCC">最寄り駅</td>
<td colspan="3" class="is-hidden-mobile" style="border-bottom:1px solid #CCC">住所</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" style="vertical-align:middle"><a id="JLDET"><i class="fas fa-edit"></i></a>
<INPUT type="hidden" id="JMCOD"><INPUT type="hidden" id="JMTON"><INPUT type="hidden" id="JMRON">
</td>
<td id="JMKIN" align="right"></td>
<td id="JMSIK" align="right" class="is-hidden-mobile"></td>
<td id="JMREI" align="right" class="is-hidden-mobile"></td>
<td id="JMTYP"></td>
<td id="JMTIK"></td>
</tr>
<tr>
<td colspan="2" id="JMEKI" class="is-hidden-mobile" style="border-bottom:1px solid #CCC"></td>
<td colspan="3" id="JMADD" class="is-hidden-mobile" style="border-bottom:1px solid #CCC"></td>
</tr>
</tbody>
</table>おわりに
IBMiの5250アプリケーションでは、複数段のサブファイルは頻繁に使われていると思います。
SmartPad4i(Cobos4i)のアプリでは、IBMiの5250アプリケーションのように複数段のサブファイル(テーブル)表示を簡単に行うことが出来ます。