struts2 标签初识 Ajax Tags tree-优快云博客

本文展示了一个使用Struts和Dojo实现的静态树状菜单示例，通过JavaScript监听节点选择事件并动态加载内容到指定区域。该示例中包含了多级节点结构，并通过AJAX调用后端接口获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/tags/ui/treeExampleStatic.jsp

1: <%@taglib prefix="s" uri="/struts-tags" %>
2: <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
3: <html>
4: <head>
5: <title>Showcase - UI Tag Example - Tree Example (Static)</title>
6: <sx:head/>
7: </head>
8: <body>
9: 
10: <!-- START SNIPPET: treeExampleStaticJsp -->
11: 
12: <script language="JavaScript" type="text/javascript">
13:     dojo.event.topic.subscribe("treeSelected", function treeNodeSelected(node) {
14:         dojo.io.bind({
15:             url: "<s:url value='/tags/ui/ajax/staticTreeSelectAction.action'/>?nodeId="+node.node.title,
16:             load: function(type, data, evt) {
17:                 var divDisplay = dojo.byId("displayIt");
18:                 divDisplay.innerHTML=data;
19:             },
20:             mimeType: "text/html"
21:         });
22:     });
23: </script>
24: 
25: 
26: <div style="float:left; margin-right: 50px;">
27: <sx:tree label="parent"  templateCssPath="/struts/tree.css" 
28: showRootGrid="true" showGrid="true" treeSelectedTopic="treeSelected">

<!--showRootGrid显示根元素默认为真--><!--showGrid显示树的元素--><!--treeSelectedTopic建议使用selectedNotifyTopics代替-->

29:     <sx:treenode label="child1" >
30:         <sx:treenode label="grandchild1" id="grandchild1Id"/>
31:         <sx:treenode label="grandchild2" id="grandchild2Id"/>
32:         <sx:treenode label="grandchild3" id="grandchild3Id"/>
33:     </sx:treenode>
34:     <sx:treenode label="child2" id="child2Id"/>
35:     <sx:treenode label="child3" id="child3Id"/>
36:     <sx:treenode label="child4" id="child4Id"/>
37:     <sx:treenode label="child5" id="child5Id">
38:         <sx:treenode label="gChild1" id="gChild1Id"/>
39:         <sx:treenode label="gChild2" id="gChild2Id"/>
40:     </sx:treenode>
41: </sx:tree>
42: </div>
43: 
44: 
45: <div id="displayIt">
46: Please click on any node on the tree.
47: </div>
48: 
49: <!-- END SNIPPET: treeExampleStaticJsp  -->
50: 
51: </body>
52: </html>

9: <body>
10: 
11: <!-- START SNIPPET: treeExampleDynamicJsp -->
12: 
13: <script language="JavaScript" type="text/javascript">
14:     dojo.event.topic.subscribe("treeSelected", function treeNodeSelected(node) {
15:         dojo.io.bind({
16:             url: "<s:url value='/tags/ui/ajax/dynamicTreeSelectAction.action'/>?nodeId="+node.node.widgetId,
17:             load: function(type, data, evt) {
18:                 var divDisplay = dojo.byId("displayId");
19:                 divDisplay.innerHTML=data;
20:             },
21:             mimeType: "text/html"
22:         });
23:     });
24: </script>
25: 
26: 
27: 
28: <div style="float:left; margin-right: 50px;">
29: <sx:tree 
30:     id="tree"
31:     rootNode="%{treeRootNode}" 
32:     childCollectionProperty="children" 
33:     nodeIdProperty="id"
34:     nodeTitleProperty="name"
35:     treeSelectedTopic="treeSelected">
36: </sx:tree> 
37: </div>
38: 
39: <div id="displayId">
40: Please click on any of the tree nodes.
41: </div>
42: 
43: <!-- END SNIPPET: treeExampleDynamicJsp -->
44: 
45: </body>

9: <body>
10: 
11: 
12: <s:url var="nodesUrl" namespace="/nodecorate" action="getNodes" />
13: <div style="float:left; margin-right: 50px;">
14:     <sx:tree id="tree" href="%{#nodesUrl}" />
15: </div>
16: 
17: </body>