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