機能説明

<IMART type=“imListHeader”>タグ。

各種一覧(リスト)に対するヘッダを表示します。

<IMART type=“imListHeader”>により、各種一覧(リスト)に対するヘッダを表示します。
本タグで生成された一覧のヘッダ項目名は、リンク表示となっています。
各項目のリンクがクリックされると、JavaScript 関数が呼び出されるため、本タグを使用した場合は、各項目リンクに対して JavaScript 関数の処理を記述する必要があります。
ヘッダの項目名は、属性の指定によりリンク表示と、通常表示 (ただの文字列) を設定できます。
ソートキーになっている項目は、ヘッダ項目名を強調して表示します。
ヘッダ情報 (項目名など) は、ファンクション・コンテナ (.js ファイル)で設定してください。
制約
本タグは HTML の<TR>タグとして作成されるため、<TABLE>〜</TABLE>内に記述してください。
その際、<TABLE>タグには class=“list_border_bg”または class=“table_border_bg”を指定してください。
表全体の枠 (横幅100%固定) <TABLE class=“list_border_bg”>
表全体の枠 (横幅任意指定) <TABLE class=“table_border_bg”>
ヘッダ情報オブジェクト
<IMART type=“imListHeader”>を使用してリストヘッダを作成する際に、属性 headerData に指定するオブジェクトです。

ヘッダ情報オブジェクト構成
プロパティ設定内容説明
name項目名ヘッダに表示する項目名
未指定の場合は、空のヘッダが表示されます。
項目ID =“checkbox”の場合は、
<INPUT type=“checkbox”>タグの name 属性となります。
(エスケープ対象のプロパティです)
key項目ID項目ID
現在のソートキー項目を判定するための ID となるので、他項目との重複は不可。
“checkbox”を指定した場合、ヘッダ内にチェックボックスが表示されます。
(エスケープ対象のプロパティです)
sortEnableソート表示状態項目名の表示状態
 ・ true : リンク表示(未指定の場合)
 ・ false: 通常表示
項目ID =“checkbox”の場合は、false が設定されます。
href項目名選択時の js 関数項目名がリンク表示の場合、リンクが選択された時のjs関数を指定
未指定の場合、onSortHeadClick(項目ID); が設定され、
項目ID =“checkbox”の場合は、「onClock イベントハンドラ」に設定する js 関数を指定します。
(エスケープ対象のプロパティです)
status現在のソートキー項目名の表示位置
 ・ true : ソートキー
 ・ false: ソートキーでない(未指定の場合)
align表示位置項目名の表示位置
 ・ center: 中央表示(未指定の場合)
 ・ left  : 左寄せ
 ・ right : 右寄せ
その他任意属性の設定値項目に設定する任意の属性(項目の<TD>タグの属性値)
複数の任意の属性を指定することも可能。
(エスケープ対象のプロパティです)
デフォルトの必須 JavaScript 関数
リストヘッダの項目名リンクがクリックされた際に呼び出される、デフォルトの JavaScript 関数の詳細を以下に示します。
本タグを使用する場合は、各自で必ず JavaScript 関数の処理を記述してください。
必須の JavaScript 関数を記述しない場合の動作については、保証外とします。
コーディング方法などの詳細については、サンプルを参照してください。
ソートの項目切り替え
リストヘッダの項目名リンクがクリックされた場合、JavaScript 関数の onSortHeadClick() が呼び出されます。
■関数名
 onSortHeadClick(key)

■概要
 リストヘッダの項目名リンクがクリックされた際に、呼び出される関数です。
 引数 key の値により、どのヘッダ項目が選択されたかの情報を取得することができます。

■引数
変数内容条件
key ヘッダの項目IDuserName リストヘッダの項目名リンクが選択された場合

属性一覧

注釈 属性名 説明 省略時の動作
escapeJs JavaScriptエスケープの有効・無効を指定します。

「true」の場合、エスケープ対象の属性値が JavaScriptエスケープされて出力されます。
「false」の場合、エスケープ対象の属性値の JavaScriptエスケープ処理は行われません。
未指定の場合は「現在実行中の プレゼンテーション・ページ に紐づくescapeJsの値」に則ってJavaScriptエスケープ処理行われます。

詳しくは、「 エスケープ処理に関して 」を参照してください。
-
escapeXml XMLエスケープの有効・無効を指定します。

「true」の場合、エスケープ対象の属性値が XMLエスケープされて出力されます。
「false」の場合、エスケープ対象の属性値の XMLエスケープ処理は行われません。
未指定の場合は、「現在実行中の プレゼンテーション・ページ に紐づくescapeXmlの値」に則ってXMLエスケープ処理行われます。

詳しくは、「 エスケープ処理に関して 」を参照してください。
-
必須
headerData ヘッダ情報オブジェクト
(エスケープ対象の属性です)
-
nowrap nowrapオプションの有無を決定するキーの情報
・属性 nowrap に指定した値が、未指定、または nowrap=“true” の場合、nowrapオプションを付加します。
・属性 nowrap に指定した値が、nowrap=“false” の場合、nowrapオプションを付加しません。
-

内部タグ

IMARTタグおよびHTML

サンプル

サンプル

サンプル
<pre>
■js
// バインド変数宣言
var aHeader; // ヘッダ項目情報

// ページの初期化関数
function init() {
    aHeader = new Array();

    aHeader[0] = new Object();
    aHeader[0].name = "checkCtrl";
    aHeader[0].key = "checkbox";
    aHeader[0].href = "onCheckBox();";

    aHeader[1] = new Object();
    aHeader[1].name = "ユーザコード";
    aHeader[1].key = "user_cd";
    aHeader[1].status = true;
    aHeader[1].href = "func1();";

    aHeader[2] = new Object();
    aHeader[2].name = "ユーザ名";
    aHeader[2].key = "name_kana";

    aHeader[3] = new Object();
    aHeader[3].name = "会社/組織";
    aHeader[3].key = "division";
    aHeader[3].sortEnable = false;
    aHeader[3].align = "left";
    aHeader[3].width = "200";
}


■html
<HTML>
    <HEAD>
        <IMART type="imDesignCss"></IMART>

        <SCRIPT LANGUAGE="JavaScript">
            // 一覧の項目名リンクがクリックされた時の処理
            function onSortHeadClick(key)
            {
                    :
                // 各自で処理を記述
                    :
            }
            // 指定したJavaScript 関数の処理
            function onCheckBox()
            {
                    :
                // 各自で処理を記述
                    :
            }
        </SCRIPT>

    </HEAD>
    <BODY>
        <TABLE class="table_border_bg">
            <!-- リストヘッダ表示 -->
            <IMART type="imListHeader" headerData=aHeader></IMART>
        </TABLE>
    </BODY>
</HTML>
</pre>