6.3.4.2. テーブル¶

6.3.4.2.1. 入力フォームのテーブル¶

入力や選択項目がある場合は、入力フォーム用テーブル「table.imui-form」を使用します。

詳細は、別ドキュメントの CSS Module List の入力フォーム用テーブル「table.imui-form」 を参照してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<table class="imui-form">
  <tr>
    <th><label>項目1</label></th>
    <td><input type="text" name="item1" /></td>
  </tr>
  <tr>
    <th><label>項目2</label></th>
    <td><input type="text" name="item2" /></td>
  </tr>
</table>

項目名となる th の中には直接文字列を指定せず label の中に文字列を指定します。

6.3.4.2.2. 一覧テーブル¶

一覧画面などで使用するテーブルは、imuiListTable を使います。

imuiListTable は、ページャーのや表示件数を表示、カラムのソートなどの機能を備えています。

詳細は、別ドキュメントの PC版UIコンポーネント imuiListTable を参照してください。

6.3.4.2.3. 検索条件／詳細検索¶

検索条件の指定を行う場合は、検索条件用テーブル「table.imui-form-search-condition」を使用します。

詳細は、別ドキュメントの CSS Module Listの検索条件用テーブル「table.imui-form-search-condition」 を参照してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<table class="imui-form-search-condition">
  <tr>
    <th><label>項目1</label></th>
    <td><input type="text" name="item1" /></td>
  </tr>
  <tr>
    <th><label>項目2</label></th>
    <td><input type="text" name="item2" /></td>
  </tr>
</table>

項目名となる th の中には直接文字列を指定せず label の中に文字列を指定します。

6.3.4.2.4. セル内の位置／文字寄せ（align）¶

6.3.4.2.5. サイズ指定方法¶

テーブルのサイズ指定の方法は以下とします。

6.3.4.2.6. imuiListTable を使わない場合のソート順¶

テーブルのソートについて説明します。

以下は、基本ルールとなります。画面のユーザビリティが低下する場合は、各画面にて仕様を決定してください。

また、画面仕様により、機能単位で決定する場合は、画面間の差異が発生しないよう注意しましょう。

• 一覧テーブルに、複数列存在する場合は、ソートキーを第２ソートキーまで指定しましょう。
• 初期表示のソートキーは、画面表示の基準となります。従って、以下を実行時に初期表示と同じソートとなります。

• 検索ボタンを押下した場合
• 最新表示アイコンを押下した場合

• ソートの順番は、昇順から降順になります。

• 未ソート例を押下した場合、昇順になります。