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

imuiTree

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

機能説明

  • ツリーを作成します
注意事項
  • imuiTreeでは以下のプラグインを同梱していますが、弊社では動作検証を行っておりませんので、ご理解の上ご利用ください
    • checkbox
    • contextmenu
    • cookies
    • core
    • crrm
    • dnd
    • hotkeys
    • html_data
    • json_data
    • languages
    • model
    • search
    • sort
    • themeroller
    • themes
    • types
    • ui
    • unique
    • wholerow
    • xml_data
  • さらに以下のプラグインを追加で提供しています
    • imuiTree
    • imuiTreeIcon
    • imuiTreeTopbar
  • プラグインを未指定の場合、以下のプラグインがデフォルトで読み込まれます
    • ui
    • themes
    • html_data
    • imuiTree
  • 以下のプラグインは、未指定であっても必ず読み込まれます
    • imuiTree
  • imuiTreeIconプラグインとtypesプラグインは共存できません
  • <!DOCTYPE html>を宣言しないとIE8では動作しません
    • 必ず<!DOCTYPE html>を宣言してください

属性一覧

注釈 属性名 型 説明 省略時の動作
Boolean属性 cache boolean ajax通信結果をキャッシュするかどうかを指定します
url属性が指定されている場合にのみ有効です		 false
id string ツリーのidです 代替idを付与
無害化 method string ajax通信時のリクエストメソッドを指定します GET
name string ツリーのnameです 代替nameを付与
onAjaxBeforeSend string ajax通信が発生する直前に呼び出される関数名を指定します
明示的にfalseを返したときのみ、通信をキャンセルします
url属性が指定されている場合にのみ有効です		 -
onAjaxComplete string ajax通信終了後に呼ばれる関数名を指定します
通信結果が成功であったかエラーであったかに関係なく必ず実行されます
url属性が指定されている場合にのみ有効です		 -
onAjaxError string ajax通信失敗後に呼ばれる関数名を指定します
url属性が指定されている場合にのみ有効です		 imuiTransitionToErrorPage
onAjaxParameterExtend string ajax通信を実行する直前に呼び出される関数名を指定します
ajax関連のメソッド内で一番最初に呼び出されます
url属性が指定されている場合にのみ有効です		 -
onAjaxSuccess string ajax通信成功後に呼ばれる関数名を指定します
url属性が指定されている場合にのみ有効です		 -
無害化 parameter Object jstree初期化時のオプションを指定します -
plainParameter string ツリーの初期化時に追加で渡したいオプションを指定します
本属性に渡したオプションは無害化されずそのまま出力されます		 -
無害化 url string ノード情報を取得する通信先を指定します
value属性と違い、ノード情報をノード展開時に適宜通信し取得することができるため、ツリー初期表示時のレスポンスを向上させることができます
主にimuiTreeNodeと組み合わせて使用します		 -
value Array ノード情報を指定します
すべてのノード情報をvalueとして渡すことにより、ajax通信することなくツリーを表示することができます		 -

サンプル

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 ノードの子ノードです -
サーバサイド JavaScript
var nodes = [
    {
        identity: 'node1',
        label: 'ノード1',
        classNames: ['ClassName1', 'ClassName2'],
        rel: 'TypeA',
        attributes: {
            'data-certain-attribute1': 'attribute-value1',
            'data-certain-attribute2': 'attribute-value2'
        }
    },
    {
        identity: 'node2',
        label: 'ノード2',
        classNames: ['ClassName3'],
        rel: 'TypeB',
        attributes: {
            'data-certain-attribute': 'attribute-value3'
        },
        children: [
            {
                identity: 'node3',
                label: 'ノード3',
                classNames: ['ClassName4', 'ClassName5'],
                rel: 'TypeA',
                attributes: {
                    'data-certain-attribute': 'attribute-value4'
                },
                children: [
                    {
                        label: 'ノード4'
                    }
                ]
            }
        ]
    }
];
HTML
<imart type="imuiTree" value=nodes />

parameter

parameter
pluginsに以下のプラグインを指定しjstreeを初期化します
  • ui
  • themes
  • html_data
サーバサイド JavaScript
var params = {
    plugins: ['ui', 'themes', 'html_data']
};

var nodes = [{
    label: 'ノード1',
    children: [{
        label: 'ノード2'
    }]
}];
HTML
<imart type="imuiTree" parameter=params value=nodes />

imuiTreeプラグイン

imuiTreeプラグイン
imuiTreeプラグインは、明示的に指定しない場合でも、常に読み込まれます
imuiTreeプラグインは、ツリー全体をimui-treeクラスを持つdiv要素で囲む動きをします
サーバサイド JavaScript
var params = {
    plugins: ['ui', 'themes', 'html_data', 'imuiTree']
};

var nodes = [{
    label: 'ノード1',
    children: [{
        label: 'ノード2'
    }]
}];
HTML
<imart type="imuiTree" parameter=params value=nodes />

imuiTreeIconプラグイン

imuiTreeIconプラグイン
imuiTreeIconプラグインを利用することで、imgPathとiconClassを利用できるようになります
imgPathには画像のURL、iconClassにCSSスプライトのクラス名を指定することで、ノードに任意のアイコンを表示することができます
サーバサイド JavaScript
var params = {
    plugins: ['ui', 'themes', 'html_data', 'imuiTreeIcon']
};

var nodes = [
    {
        label: 'ノード1'
    },
    {
        label: 'ノード2',
        imgPath: 'ui/images/icons/fugue-icons-3.3.4/icons/document.png'
    },
    {
        label: 'ノード3',
        iconClass: 'im-ui-icon-common-16-document-repetition'
    }
];
HTML
<imart type="imuiTree" parameter=params value=nodes />

imuiTreeTopbarプラグイン

imuiTreeTopbarプラグイン
imuiTreeTopbarプラグインを利用することで、ノードを「すべて開く」「すべて閉じる」アイコンをもつタイトルバーを表示できます
サーバサイド JavaScript
var params = {
    plugins: ['ui', 'themes', 'html_data', 'imuiTreeTopbar']
};

var nodes = [{
    label: 'ノード1',
    children: [{
        label: 'ノード2'
    }]
}];
HTML
<imart type="imuiTree" parameter=params value=nodes />

plainParameter

plainParameter
ツリーの初期化時に追加で渡したいオプションを指定します
本属性に渡したオプションは無害化されずそのまま出力されます
サーバサイド JavaScript
var params = {
    plugins: ['ui', 'themes', 'json_data']
};

var plainParam = 'json_data: {\n'
               + '  data: [{\n'
               + '    data: "ノード1",\n'
               + '    children: ["ノード2"]\n'
               + '  }]\n'
               + '}';
HTML
<imart type="imuiTree" parameter=params plainParameter=plainParam />

CSJS(jstree)

CSJS(jstree)
jstreeの主なAPIのサンプルプログラムです
jstreeの各APIは動作保証の対象外です
サーバサイド JavaScript
var params = {
    plugins: ['ui', 'themes', 'html_data']
};

var nodes = [
    {
        identity: 'node1',
        label: 'ノード1',
        children: [{
            identity: 'node2',
            label: 'ノード2'
        }]
    },
    {
        identity: 'node3',
        label: 'ノード3',
        attributes: {
          'data-tree-csjs-sample': 'tree-csjs-sample'
        },
        children: [{
            identity: 'node4',
            label: 'ノード4',
            children: [{
                identity: 'node5',
                label: 'ノード5'
            }]
        }]
    }
];
HTML
<imart type="imuiTree" id="tree-csjs-sample" parameter=params value=nodes /><br />

<input type="button" id="open-all" class="imui-button" value="すべて開く" style="padding: 2px 5px" />
<input type="button" id="close-all" class="imui-button" value="すべて閉じる" />
<input type="button" id="open-all-node3" class="imui-button" value="ノード3配下をすべて開く" />
<input type="button" id="close-all-node3" class="imui-button" value="ノード3配下をすべて閉じる" />
<input type="button" id="open-node-node3" class="imui-button" value="ノード3を開く" />
<input type="button" id="close-node-node3" class="imui-button" value="ノード3を閉じる" />
<input type="button" id="select-node-node3" class="imui-button" value="ノード3を選択する" /><br />
<input type="button" id="get-selected" class="imui-button" value="選択済みノードのID一覧を表示する" />
<input type="button" id="get-text-node3" class="imui-button" value="ノード3のラベルを表示する" />
<input type="button" id="get-data-attribute-node3" class="imui-button" value="ノード3の属性値(data-tree-csjs-sample)を表示する" />

<script type="text/javascript">
  (function($) {
    $('#tree-csjs-sample').on('select_node.jstree', function(event, data) {
      imuiAlert('選択されたノードのID属性：' + data.rslt.obj.attr('id'));
    }).on('open_node.jstree', function(event, data) {
      imuiAlert('開かれたノードのID属性：' + data.rslt.obj.attr('id'));
    }).on('close_node.jstree', function(event, data) {
      imuiAlert('閉じられたノードのID属性：' + data.rslt.obj.attr('id'));
    });

    $('#open-all').click(function() {
      $('#tree-csjs-sample').jstree('open_all');
    });

    $('#close-all').click(function() {
      $('#tree-csjs-sample').jstree('close_all');
    });

    $('#open-all-node3').click(function() {
      $('#tree-csjs-sample').jstree('open_all', '#node3');
    });

    $('#close-all-node3').click(function() {
      $('#tree-csjs-sample').jstree('close_all', '#node3');
    });

    $('#open-node-node3').click(function() {
      $('#tree-csjs-sample').jstree('open_node', '#node3');
    });

    $('#close-node-node3').click(function() {
      $('#tree-csjs-sample').jstree('close_node', '#node3');
    });

    $('#select-node-node3').click(function() {
      $('#tree-csjs-sample').jstree('select_node', '#node3');
    });

    $('#get-selected').click(function() {
      var selected = $('#tree-csjs-sample').jstree('get_selected');
      var ids = [];

      if (selected != null) {
        for (var i = 0; i < selected.length; ++i) {
          ids[ids.length] = $(selected[i]).attr('id');
        }
      }

      imuiAlert('選択済みノードのID一覧：' + ids.join(','));
    });

    $('#get-text-node3').click(function() {
      imuiAlert('ノード3のラベル：' + $('#tree-csjs-sample').jstree('get_text', '#node3'));
    });

    $('#get-data-attribute-node3').click(function() {
      imuiAlert('ノード3の属性値(data-tree-csjs-sample)：' + $('#node3').data('tree-csjs-sample'));
    });
  })(jQuery);
</script>

Copyright © 2012 NTT DATA INTRAMART CORPORATION