複数列のレポート表示

【SFLLIN の表示】

SFLLIN とは縦1列のサブファイルをエミュレーター上で複数列のサブファイルに分割して表示する
DDSキーワードのひとつです。
1列あたりの行数がパラメータで指定した行数になると次の行を右方向のテーブルへ表示していきます。

eStudio で生成した Web適用業務をカスタマイズすることで、ブラウザ上でも SFLLIN のように
複数列に分割したサブ・ファイル型の表示を行うことができます。
ブラウザ上でも縦に長いサブファイルを横に展開できれば、一段と見やすくなります。
それでは次のサンプルをご覧下さい。

【初期画面】 SOURCE

複数列のレポート表示 初期画面

【CGI サンプルソース】 SOURCE

【HTML サンプルソース】 SOURCE

【解説】

カスタマイズを行う際のポイントとは次の2点です。

HTMLカスタマイズ

20行あるサブファイルのテーブルを10行目で二つに分ける

まず、テーブルを二つに分けるために「テーブルの終了タグ」＋「次のテーブルの開始タグ」が HTML へ
動的にセットされるよう、CGIソースへ記述します。
行番号が 10 の場合フィールドへ HTMLタグ「</TABLE><TABLE CLASS="MAIN2">」がセットされます。
それ以外ではブランクがセットされます。 

     *********************************************************
     P READF           B                   EXPORT
     *********************************************************
     D                 PI
     C                   EVAL      HDR001            = SHCODE
     C     1             DO        MAXGYO        SFLRRN
     C                   SETOFF                                       50
     C                   READ      SHOHIN                                 50
     C   50              CALLP     SETEOF
     C   50              LEAVE
     C     SFLRRN        IFEQ      10
     C                   EVAL      ENDTBL=ENDTAG
     C                   ELSE
     C                   EVAL      ENDTBL=*BLANK
     C                   END
     C                   WRITE     SFREC01                              99
     C                   END
     C                   WRITE     SFLCTL01
     P                 E

続いて先ほど指定した「</TABLE><TABLE CLASS="MAIN2">」がセットされる ENDTBLフィールドを
HTMLテンプレートの REPORTタグ内へ追加します。
フィールドの桁数は HTMLタグの文字数分を定義します。 

<table class="MAIN1">
<REPORT NAME=SFREC01><tr>
<td><span name=GYONO.0000 alt="4S0" EDTCDE(3)>####</span></td>
<FLDFROM>
<td nowrap width="110"><span name=SHCODE.0000 alt="10A">##########</span></td>
<td nowrap width="200"><span name=SHNAME.0000 alt="24O">########################</span></td>
<FLDEND>
</tr>
<span name=ENDTBL.0000 alt="29A">#############################</span>
</REPORT>
</table>

二つに分けたテーブルをスタイルシートで横並びに表示する

スタイルシートへクラス MAIN2 を定義します。 

/*明細左テーブル*/
table.MAIN1{
   float:left;
   clear:right;
   width:364px;
   border-width:0px 2px 2px 2px;
   margin-right:12px;
}
/*明細右テーブル*/
table.MAIN2{
   float:left;
   clear:right;
   width:364px;
   border-width:0px 2px 2px 2px;
}

float:left; でエレメントを左寄せして表示し、
clear:right; で後続のエレメントを右へ回り込ませます。

[ TOP ]