API Docs for: 1.0.0
Show:

nablarch.ui.AutoSpan Class

カラム値による自動行連結機能

上下に隣接するセルにおいて、特定の属性値が同じあった場合に自動的にセルを連結させる機能。 本機能を用いることで場合、一般的な実装に比べてサーバサイド側のロジックを軽減することができる。

なお、データのソートはサーバ側の処理で 事前に行っておく必要がある。

動作仕様

以下の条件を満たすセルをrowspan を用いて連結する。 連結後に残るのは、一番上側の列に存在するセルのみである。

  1. selector属性に合致する。
  2. 上下方向に隣接している。
  3. data-autospan属性の値が一致している。

マークアップ仕様

次の例では「ユーザ名」カラムの data-autospan の値が一致する隣接セルが結合される。

<table>
  <tr>
    <th class="nablarch_AutoSpan -selector td.userName">ユーザ名</th>
    <th> 利用年月 </th>
    <th> 月別課金額 </th>
  </tr>
  <tr>
    <td class="userName" data-autospan="user001">ユーザ001</td>
    <td> 2009/12 </td>
    <td> 4321 円 </td>
  </tr>
  <tr>
    <td class="userName" data-autospan="user001">ユーザ001</td>
    <td> 2010/12 </td>
    <td> 5832 円 </td>
  </tr>
  <tr>
    <td class="userName" data-autospan="user001">ユーザ001</td>
    <td> 2011/1 </td>
    <td> 899 円 </td>
  </tr>
   ...
  <tr>
    <td class="userName" data-autospan="user002">ユーザ002</td>
    <td> 2009/10 </td>
    <td> 3455 円 </td>
  </tr>
  ...
</table>

Item Index

Methods

Properties

Methods

AutoSpan

(
  • element
  • option
)
AutoSpan

コンストラクタ

Parameters:

  • element HTMLElement

    マーカCSSを指定したDOMノード

  • option Object

    オプションを格納したオブジェクト selector: 結合対象のセルを指定するセレクタ式

Returns:

AutoSpan:

インスタンス

Properties

$cols

JQuery

結合対象のセルを格納する結果セット

$table

JQuery

結合対象のセルを含むテーブル

selector

String

結合対象のセルを指定するセレクタ式

widgetType

String final static

モジュール識別名