スクリプト開発向けタグライブラリ

imuiTreeNode

コンポーネント情報
モジュールim_ui
導入されたバージョン8.0.3
バージョン8.0.3

機能説明

  • ツリーノードを作成します
  • 主にurl属性を指定したimuiTreeタグと組み合わせて使用します
  • imuiTreeのvalue属性と同じ形式でvalue属性を受け取り、その内容をHTMLのリスト形式に変換し出力します
注意事項
  • ajax通信でコンテンツの中身を取得して表示する場合は、返却するHTMLにテーマがかからないように指定してください。詳細は以下の サンプル を参照してください。

属性一覧

注釈 属性名 型 説明 省略時の動作
id string ツリーのidです 代替idを付与
name string ツリーのnameです 代替nameを付与
value Array - -

サンプル

value

value
valueには以下のオブジェクトを指定してください
注釈 属性名 型 説明 省略時の動作
identity stringノードのidです 代替idを付与
無害化国際化label stringノードのラベルです -
無害化 classNamesArray ノードのclass属性に指定するクラス名の配列です -
無害化 rel stringノードのrel属性です（主にtypesプラグインと組み合わせて使用します） -
無害化 imgPath stringノードに表示する画像のURLです
プラグインにimuiTreeIconを指定しないと使用できません
imgPathとiconClassを同時指定することはできません、どちらか片方のみを指定してください 		-
無害化 iconClass stringノードに表示する画像のCSSスプライトクラス名です
プラグインにimuiTreeIconを指定しないと使用できません
imgPathとiconClassを同時指定することはできません、どちらか片方のみを指定してください		-
無害化 attributesObjectノードに指定する属性名と属性値をキーと値に持つオブジェクトです -
children Array ノードの子ノードです -
imuiTreeのurl属性、imuiTreeNodeを組み合わせて使用することで、ノード情報をノード展開時に適宜通信し取得することができます
これにより、ツリー初期表示時のレスポンスを向上させることが可能です
通信先サーバへのリクエストには、ノード情報のattributesに設定した名前/値が送信されます
以下のサンプルコードでは分かりやすさのためノード情報をプログラム中に埋め込み返却していますが、実際の処理ではnodeIdentityの値に応じて各種APIを通じた結果を返す実装を行ってください
サーバサイド JavaScript
var params = {
    plugins: ['ui', 'themes', 'html_data']
};
HTML
<imart type="imuiTree" parameter=params url="sample/tree/ajax" />
サーバサイド JavaScript（通信先url「sample/tree/ajax」を実装するjs）
var nodes;

function init(request) {
    nodes = buildList(request['data-node-identity']); // attributes に指定した属性名/属性値がリクエストとして送信されます
    Web.getHTTPResponse().setContentType('text/plain; charset=utf-8'); // 出力する HTML にテーマがかかってしまわないように、text/plain とします
}

function buildList(nodeIdentity) {
    if (nodeIdentity == null) { // トップレベルのノード情報を返却します（以下のコードですべてのノードに「data-node-identity」を指定しているため、この属性名が存在しないと言うことは、トップレベルのノードのリクエストであるはず）
        return [
            {
                identity: 'node1',
                label: 'ノード1',
                classNames: ['ClassName1', 'ClassName2'],
                rel: 'TypeA',
                attributes: {
                    'data-node-identity': 'ThisIsNode1',
                    'data-certain-attribute1': 'attribute-value1',
                    'data-certain-attribute2': 'attribute-value2'
                }
            },
            {
                identity: 'node2',
                label: 'ノード2',
                classNames: ['jstree-closed', 'ClassName3'], // 子ノードが存在するノードには、ノードの開閉ができるようにするために「jstree-closed」クラスを指定します
                rel: 'TypeB',
                attributes: {
                    'data-node-identity': 'ThisIsNode2',
                    'data-certain-attribute': 'attribute-value3'
                }
            }
        ];
    } else if (nodeIdentity === 'ThisIsNode2') { // 「ノード2」直下のノード情報を返却します
        return [
            {
                identity: 'node3',
                label: 'ノード3',
                classNames: ['jstree-closed', 'ClassName4', 'ClassName5'], // 子ノードが存在するノードには、ノードの開閉ができるようにするために「jstree-closed」クラスを指定します
                rel: 'TypeA',
                attributes: {
                    'data-node-identity': 'ThisIsNode3',
                    'data-certain-attribute': 'attribute-value4'
                }
            }
        ];
    } else if (nodeIdentity === 'ThisIsNode3') { // 「ノード3」直下のノード情報を返却します
        return [
            {
                label: 'ノード4',
                attributes: {
                    'data-node-identity': 'ThisIsNode4'
                }
            }
        ];
    }

    return [];
}
HTML（通信先url「sample/tree/ajax」を実装するhtml）
<imart type="imuiTreeNode" value=nodes />

ajax通信で取得したHTMLを返却する場合

  • このサンプルではリクエストへの属性として指定する方法でテーマが適用されていないHTMLを返却します。
サーバサイド JavaScript
var params = {
    plugins: ['ui', 'themes', 'html_data']
};
HTML
<imart type="imuiTree" parameter=params url="sample/tree/ajax" />
サーバサイド JavaScript（通信先url「sample/tree/ajax」を実装するjs）
var nodes;

function init(request) {
    nodes = buildList(request['data-node-identity']); // attributes に指定した属性名/属性値がリクエストとして送信されます
    request.setAttribute('imui-theme-builder-module','notheme'); // 出力する HTML にテーマがかかってしまわないように、notheme を指定します
}

function buildList(nodeIdentity) {
    if (nodeIdentity == null) { // トップレベルのノード情報を返却します（以下のコードですべてのノードに「data-node-identity」を指定しているため、この属性名が存在しないと言うことは、トップレベルのノードのリクエストであるはず）
        return [
            {
                identity: 'node1',
                label: 'ノード1',
                classNames: ['ClassName1', 'ClassName2'],
                rel: 'TypeA',
                attributes: {
                    'data-node-identity': 'ThisIsNode1',
                    'data-certain-attribute1': 'attribute-value1',
                    'data-certain-attribute2': 'attribute-value2'
                }
            },
            {
                identity: 'node2',
                label: 'ノード2',
                classNames: ['jstree-closed', 'ClassName3'], // 子ノードが存在するノードには、ノードの開閉ができるようにするために「jstree-closed」クラスを指定します
                rel: 'TypeB',
                attributes: {
                    'data-node-identity': 'ThisIsNode2',
                    'data-certain-attribute': 'attribute-value3'
                }
            }
        ];
    } else if (nodeIdentity === 'ThisIsNode2') { // 「ノード2」直下のノード情報を返却します
        return [
            {
                identity: 'node3',
                label: 'ノード3',
                classNames: ['jstree-closed', 'ClassName4', 'ClassName5'], // 子ノードが存在するノードには、ノードの開閉ができるようにするために「jstree-closed」クラスを指定します
                rel: 'TypeA',
                attributes: {
                    'data-node-identity': 'ThisIsNode3',
                    'data-certain-attribute': 'attribute-value4'
                }
            }
        ];
    } else if (nodeIdentity === 'ThisIsNode3') { // 「ノード3」直下のノード情報を返却します
        return [
            {
                label: 'ノード4',
                attributes: {
                    'data-node-identity': 'ThisIsNode4'
                }
            }
        ];
    }

    return [];
}

Copyright © 2012 NTT DATA INTRAMART CORPORATION