SmartPad4i 複数段のサブファイル(テーブル)を作成する方法

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アプリケーションのように複数段のサブファイル(テーブル)表示を簡単に行うことが出来ます。