機能説明

  • ツリーを作成します
  • treeでは以下のプラグインを同梱していますが、弊社では動作検証を行っておりませんので、ご理解の上ご利用ください
    • 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 Map<String, Object> jstree初期化時のオプションを指定します -
plainParameter String ツリーの初期化時に追加で渡したいオプションを指定します
本属性に渡したオプションは無害化されずそのまま出力されます
-
無害化 url String ノード情報を取得する通信先を指定します
value属性と違い、ノード情報をノード展開時に適宜通信し取得することができるため、ツリー初期表示時のレスポンスを向上させることができます
主にtreeNodeと組み合わせて使用します
-
value List<?> ノード情報を指定します
すべてのノード情報をvalueとして渡すことにより、ajax通信することなくツリーを表示することができます
-

サンプル

value

value
valueには以下のオブジェクトを指定してください
注釈 属性名 説明 省略時の動作
identity String ノードのidです 代替idを付与
無害化国際化label String ノードのラベルです -
無害化 classNamesList<String> ノードのclass属性に指定するクラス名の配列です -
無害化 rel String ノードのrel属性です(主にtypesプラグインと組み合わせて使用します) -
無害化 imgPath String ノードに表示する画像のURLです
プラグインにimuiTreeIconを指定しないと使用できません
imgPathとiconClassを同時指定することはできません、どちらか片方のみを指定してください
-
無害化 iconClass String ノードに表示する画像のCSSスプライトクラス名です
プラグインにimuiTreeIconを指定しないと使用できません
imgPathとiconClassを同時指定することはできません、どちらか片方のみを指定してください
-
無害化 attributesMap<String, String> ノードに指定する属性名と属性値をキーと値に持つオブジェクトです -
children List<? extends Map<?, ?>>ノードの子ノードです -
JSP
<%!
    <T, U extends T> List<T> makeList(final List<T> list, final U... values) {
        for (final U value : values) {
            list.add(value);
        }

        return list;
    }

    <T> Map<String, T> makeMap(final Map<String, T> map, final Map.Entry<String, ? extends T>... entries) {
        for (final Map.Entry<String, ? extends T> entry : entries) {
            map.put(entry.getKey(), entry.getValue());
        }

        return map;
    }

    <T> Map.Entry<String, T> makeEntry(final String key, final T value) {
        return new AbstractMap.SimpleEntry(key, value);
    }

    final List<?> nodes = makeList(new ArrayList<Map<String, Object>>(), makeMap(
            new HashMap<String, Object>(),
            makeEntry("identity", "node1"),
            makeEntry("label", "ノード1"),
            makeEntry("classNames", makeList(new ArrayList<String>(), "ClassName1", "ClassName2")),
            makeEntry("rel", "TypeA"),
            makeEntry("attributes", makeMap(
                    new HashMap<String, String>(),
                    makeEntry("data-certain-attribute1", "attribute-value1"),
                    makeEntry("data-certain-attribute2", "attribute-value2")
            ))
    ), makeMap(
            new HashMap<String, Object>(),
            makeEntry("identity", "node2"),
            makeEntry("label", "ノード2"),
            makeEntry("classNames", makeList(new ArrayList<String>(), "ClassName3")),
            makeEntry("rel", "TypeB"),
            makeEntry("attributes", makeMap(
                    new HashMap<String, String>(),
                    makeEntry("data-certain-attribute", "attribute-value3")
            )),
            makeEntry("children", makeList(new ArrayList<Map<String, Object>>(), makeMap(
                    new HashMap<String, Object>(),
                    makeEntry("identity", "node3"),
                    makeEntry("label", "ノード3"),
                    makeEntry("classNames", makeList(new ArrayList<String>(), "ClassName4", "ClassName5")),
                    makeEntry("rel", "TypeA"),
                    makeEntry("attributes", makeMap(
                            new HashMap<String, String>(),
                            makeEntry("data-certain-attribute", "attribute-value4")
                    )),
                    makeEntry("children", makeList(new ArrayList<Map<String, Object>>(), makeMap(
                            new HashMap<String, Object>(),
                            makeEntry("label", "ノード4")
                    )))
            )))
    ));
%>

<imui:tree value="<%= nodes %>" />

parameter

parameter
pluginsに以下のプラグインを指定しjstreeを初期化します
  • ui
  • themes
  • html_data
JSP
<%!
    <T, U extends T> List<T> makeList(final List<T> list, final U... values) {
        for (final U value : values) {
            list.add(value);
        }

        return list;
    }

    <T> Map<String, T> makeMap(final Map<String, T> map, final Map.Entry<String, ? extends T>... entries) {
        for (final Map.Entry<String, ? extends T> entry : entries) {
            map.put(entry.getKey(), entry.getValue());
        }

        return map;
    }

    <T> Map.Entry<String, T> makeEntry(final String key, final T value) {
        return new AbstractMap.SimpleEntry(key, value);
    }

    final Map<String, Object> params = makeMap(
            new HashMap<String, Object>(),
            makeEntry("plugins", makeList(new ArrayList<String>(), "ui", "themes", "html_data"))
    );

    final List<?> nodes = makeList(new ArrayList<Map<String, Object>>(), makeMap(
            new HashMap<String, Object>(),
            makeEntry("label", "ノード1"),
            makeEntry("children", makeList(new ArrayList<Map<String, Object>>(), makeMap(
                    new HashMap<String, Object>(),
                    makeEntry("label", "ノード2")
            )))
    ));
%>

<imui:tree parameter="<%= params %>" value="<%= nodes %>" />

imuiTreeプラグイン

imuiTreeプラグイン
imuiTreeプラグインは、明示的に指定しない場合でも、常に読み込まれます
imuiTreeプラグインは、ツリー全体をimui-treeクラスを持つdiv要素で囲む動きをします
JSP
<%!
    <T, U extends T> List<T> makeList(final List<T> list, final U... values) {
        for (final U value : values) {
            list.add(value);
        }

        return list;
    }

    <T> Map<String, T> makeMap(final Map<String, T> map, final Map.Entry<String, ? extends T>... entries) {
        for (final Map.Entry<String, ? extends T> entry : entries) {
            map.put(entry.getKey(), entry.getValue());
        }

        return map;
    }

    <T> Map.Entry<String, T> makeEntry(final String key, final T value) {
        return new AbstractMap.SimpleEntry(key, value);
    }

    final Map<String, Object> params = makeMap(
            new HashMap<String, Object>(),
            makeEntry("plugins", makeList(new ArrayList<String>(), "ui", "themes", "html_data", "imuiTree"))
    );

    final List<?> nodes = makeList(new ArrayList<Map<String, Object>>(), makeMap(
            new HashMap<String, Object>(),
            makeEntry("label", "ノード1"),
            makeEntry("children", makeList(new ArrayList<Map<String, Object>>(), makeMap(
                    new HashMap<String, Object>(),
                    makeEntry("label", "ノード2")
            )))
    ));
%>

<imui:tree parameter="<%= params %>" value="<%= nodes %>" />

imuiTreeIconプラグイン

imuiTreeIconプラグイン
imuiTreeIconプラグインを利用することで、imgPathとiconClassを利用できるようになります
imgPathには画像のURL、iconClassにCSSスプライトのクラス名を指定することで、ノードに任意のアイコンを表示することができます
JSP
<%!
    <T, U extends T> List<T> makeList(final List<T> list, final U... values) {
        for (final U value : values) {
            list.add(value);
        }

        return list;
    }

    <T> Map<String, T> makeMap(final Map<String, T> map, final Map.Entry<String, ? extends T>... entries) {
        for (final Map.Entry<String, ? extends T> entry : entries) {
            map.put(entry.getKey(), entry.getValue());
        }

        return map;
    }

    <T> Map.Entry<String, T> makeEntry(final String key, final T value) {
        return new AbstractMap.SimpleEntry(key, value);
    }

    final Map<String, Object> params = makeMap(
            new HashMap<String, Object>(),
            makeEntry("plugins", makeList(new ArrayList<String>(), "ui", "themes", "html_data", "imuiTreeIcon"))
    );

    final List<?> nodes = makeList(new ArrayList<Map<String, Object>>(), makeMap(
            new HashMap<String, Object>(),
            makeEntry("label", "ノード1")
    ), makeMap(
            new HashMap<String, Object>(),
            makeEntry("label", "ノード2"),
            makeEntry("imgPath", "ui/images/icons/fugue-icons-3.3.4/icons/document.png")
    ), makeMap(
            new HashMap<String, Object>(),
            makeEntry("label", "ノード3"),
            makeEntry("iconClass", "im-ui-icon-common-16-document-repetition")
    ));
%>

<imui:tree parameter="<%= params %>" value="<%= nodes %>" />

imuiTreeTopbarプラグイン

imuiTreeTopbarプラグイン
imuiTreeTopbarプラグインを利用することで、ノードを「すべて開く」「すべて閉じる」アイコンをもつタイトルバーを表示できます
JSP
<%!
    <T, U extends T> List<T> makeList(final List<T> list, final U... values) {
        for (final U value : values) {
            list.add(value);
        }

        return list;
    }

    <T> Map<String, T> makeMap(final Map<String, T> map, final Map.Entry<String, ? extends T>... entries) {
        for (final Map.Entry<String, ? extends T> entry : entries) {
            map.put(entry.getKey(), entry.getValue());
        }

        return map;
    }

    <T> Map.Entry<String, T> makeEntry(final String key, final T value) {
        return new AbstractMap.SimpleEntry(key, value);
    }

    final Map<String, Object> params = makeMap(
            new HashMap<String, Object>(),
            makeEntry("plugins", makeList(new ArrayList<String>(), "ui", "themes", "html_data", "imuiTreeTopbar"))
    );

    final List<?> nodes = makeList(new ArrayList<Map<String, Object>>(), makeMap(
            new HashMap<String, Object>(),
            makeEntry("label", "ノード1"),
            makeEntry("children", makeList(new ArrayList<Map<String, Object>>(), makeMap(
                    new HashMap<String, Object>(),
                    makeEntry("label", "ノード2")
            )))
    ));
%>

<imui:tree parameter="<%= params %>" value="<%= nodes %>" />

plainParameter

plainParameter
ツリーの初期化時に追加で渡したいオプションを指定します
本属性に渡したオプションは無害化されずそのまま出力されます
JSP
<%!
    <T, U extends T> List<T> makeList(final List<T> list, final U... values) {
        for (final U value : values) {
            list.add(value);
        }

        return list;
    }

    <T> Map<String, T> makeMap(final Map<String, T> map, final Map.Entry<String, ? extends T>... entries) {
        for (final Map.Entry<String, ? extends T> entry : entries) {
            map.put(entry.getKey(), entry.getValue());
        }

        return map;
    }

    <T> Map.Entry<String, T> makeEntry(final String key, final T value) {
        return new AbstractMap.SimpleEntry(key, value);
    }

    final Map<String, Object> params = makeMap(
            new HashMap<String, Object>(),
            makeEntry("plugins", makeList(new ArrayList<String>(), "ui", "themes", "json_data"))
    );

    final String plainParam = "json_data: {\n"
                            + "  data: [{\n"
                            + "    data: 'ノード1',\n"
                            + "    children: ['ノード2']\n"
                            + "  }]\n"
                            + "}";
%>

<imui:tree parameter="<%= params %>" plainParameter="<%= plainParam %>" />

CSJS(jstree)

CSJS(jstree)
jstreeの主なAPIのサンプルプログラムです
jstreeの各APIは動作保証の対象外です
JSP
<%!
    <T, U extends T> List<T> makeList(final List<T> list, final U... values) {
        for (final U value : values) {
            list.add(value);
        }

        return list;
    }

    <T> Map<String, T> makeMap(final Map<String, T> map, final Map.Entry<String, ? extends T>... entries) {
        for (final Map.Entry<String, ? extends T> entry : entries) {
            map.put(entry.getKey(), entry.getValue());
        }

        return map;
    }

    <T> Map.Entry<String, T> makeEntry(final String key, final T value) {
        return new AbstractMap.SimpleEntry(key, value);
    }

    final Map<String, Object> params = makeMap(
            new HashMap<String, Object>(),
            makeEntry("plugins", makeList(new ArrayList<String>(), "ui", "themes", "html_data"))
    );

    final List<?> nodes = makeList(new ArrayList<Map<String, Object>>(), makeMap(
            new HashMap<String, Object>(),
            makeEntry("identity", "node1"),
            makeEntry("label", "ノード1"),
            makeEntry("children", makeList(new ArrayList<Map<String, Object>>(), makeMap(
                    new HashMap<String, Object>(),
                    makeEntry("identity", "node2"),
                    makeEntry("label", "ノード2")
            )))
    ), makeMap(
            new HashMap<String, Object>(),
            makeEntry("identity", "node3"),
            makeEntry("label", "ノード3"),
            makeEntry("attributes", makeMap(
                    new HashMap<String, String>(),
                    makeEntry("data-tree-csjs-sample", "tree-csjs-sample")
            )),
            makeEntry("children", makeList(new ArrayList<Map<String, Object>>(), makeMap(
                    new HashMap<String, Object>(),
                    makeEntry("identity", "node4"),
                    makeEntry("label", "ノード4"),
                    makeEntry("children", makeList(new ArrayList<Map<String, Object>>(), makeMap(
                            new HashMap<String, Object>(),
                            makeEntry("identity", "node5"),
                            makeEntry("label", "ノード5")
                    )))
            )))
    ));
%>

<imui:tree id="tree-csjs-sample" parameter="<%= params %>" value="<%= nodes %>" />

<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>