Sorting非推奨

代替タグはありません。

サンプル

‹ ›

コンポーネント情報
バージョン	1.0

機能説明

テーブルのデータをソートするタグです。

クリックされたヘッダの列データの大小関係でテーブルのデータを order属性で指定した方向に並びかえます。ソート列のヘッダを再びクリックすると、逆の方向に並びかえられます。ソートは、セル内のデータを文字列として解釈して行います。

ソート対象の列のヘッダは、bgColorClick属性で指定された背景色、fgColorClick属性で指定された文字色で表示されます。

タグのボディには、<TABLE>タグの代わりに<DynamicTable>タグ、または<DBListPaging>タグを指定することができます。

<CellDataSelector>タグ、<ColumnDataSelector>タグ、<RowDataSelector>、<LineHighLight>タグと組み合わせて使用することができます。

注意事項：

* タグのボディには、テーブルは１つしか指定することができません。また、テーブルの内部にテーブルをもつこともできません。
* テーブルに対して、ROWSPAN属性、 COLSPAN属性を設定することはできません。
* このタグで<DynamicTable>タグ、<DBListPaging>タグのテーブルデータ全体をソートすることはできません。ソートされるのは表示中のデータだけです。全てのデータをソートしたい場合は、<Column>タグのsortable属性を利用してください。

属性一覧

注釈	属性名	説明	省略時の動作
必須	`bgColorClick`	ソート列のヘッダの背景色。デフォルト値は "navy"	-
必須	`fgColorClick`	ソート列のヘッダの文字色。デフォルト値は "white"	-
必須	`order`	ソート基準方向（asc：昇順／desc：降順）。デフォルト値は "asc"	-

内部タグ

JSP

サンプル

<pre>
<imtag:Sorting bgColorClick="#F5FDFF" fgColorClick="red">
  <imtag:CellDataSelector>
    <table border=1 bgcolor="#BFD0EE" width="50%" bordercolor="#336699">
      <tr bgcolor="#86AFFA">
        <th width="30%">ID</th>
        <th width="32%">ローマ字</th>
        <th width="38%">漢字</th>
      </tr>
      <tr>
        <td width="30%">001</td>
        <td width="32%">Tokyo</td>
        <td width="38%">東京</td>
      </tr>
      <tr>
        <td width="30%">002</td>
        <td width="32%">Kyoto</td>
        <td width="38%">京都</td>
      </tr>    
    </table>
  </imtag:CellDataSelector>
</imtag:Sorting></pre>

<pre>
<imtag:Sorting bgColorClick="#F5FDFF" fgColorClick="red">
  <imtag:CellDataSelector>
    <table border=1 bgcolor="#BFD0EE" width="50%" bordercolor="#336699">
      <tr bgcolor="#86AFFA">
        <th width="30%">ID</th>
        <th width="32%">ローマ字</th>
        <th width="38%">漢字</th>
      </tr>
      <tr>
        <td width="30%">001</td>
        <td width="32%">Tokyo</td>
        <td width="38%">東京</td>
      </tr>
      <tr>
        <td width="30%">002</td>
        <td width="32%">Kyoto</td>
        <td width="38%">京都</td>
      </tr>    
    </table>
  </imtag:CellDataSelector>
</imtag:Sorting></pre>