本文展示了一个复选框与树形结构结合的动态交互示例，通过JavaScript和Struts标签库实现，展示了如何在树节点被选择时更新树结构中的其他相关节点状态。
<%@page contentType="text/html;charset=GBK" %>
<%@ taglib prefix="s" uri="/struts-dojo-tags"%>
<html>
<head>
<title>Tree标签复选框例子</title>
<s:head/>
</head>
<body>
<script type="text/javascript">
function treeNodeSelected(message)
{
var divDisplay = dojo.byId("displayIt");
//message.source就是发出select事件的TreeNode对象
var node = message.source;
divDisplay.innerHTML = node.widgetId + " : " +node.children.length;
var i=0;
var xml;
for(i=0;i<node.children.length;i++){
if(node.widgetId=='parentId_root'){
xml='parentId';
}else{
xml=node.widgetId;
}
if(document.getElementById(xml+'box').checked){
document.getElementById(node.children[i].widgetId+'box').checked=true;
}else{
document.getElementById(node.children[i].widgetId+'box').checked=false;
}
}
};
//为页面添加onload事件处理函数
dojo.addOnLoad(function()
{
//得到Tree Widget的TreeSelector
var selector = dojo.widget.byId("parentId").selector;
//将treeNodeSelected方法绑定到selector对象的select事件上
dojo.event.connect(selector,"select","treeNodeSelected");
});
</script>
<div style="float:left; margin-right: 50px;">
<s:tree label="<input type=checkbox name=inputcheckbox id=parentIdbox>程序员之家论坛" id="parentId"
templateCssPath="/struts/tree.css"
showRootGrid="true" showGrid="true" childCollectionProperty="children" gridIconSrcC="">
<s:treenode label="<input type=checkbox name=inputcheckbox id=child1Idbox>Windows编程系列" id="child1Id" >
<s:treenode label="<input type=checkbox name=inputcheckbox id=grandchild1Idbox>C/C++" id="grandchild1Id" />
<s:treenode label="<input type=checkbox name=inputcheckbox id=grandchild2Idbox>Visual Basic" id="grandchild2Id" />
<s:treenode label="<input type=checkbox name=inputcheckbox id=grandchild3Idbox>Visual C++" id="grandchild3Id" />
</s:treenode>
<s:treenode label="<input type=checkbox name=inputcheckbox id=child2Idbox>Java Core" id="child2Id" />
<s:treenode label="<input type=checkbox name=inputcheckbox id=child4Idbox >Java Web开发" id="child4Id" />
<s:treenode label="<input type=checkbox name=inputcheckbox id=child5Idbox>开源框架" id="child5Id">
<s:treenode label="<input type=checkbox name=inputcheckbox id=gChild1Idbox>Struts 2" id="gChild1Id" />
<s:treenode label="<input type=checkbox name=inputcheckbox id=gChild2Idbox>Hibernate" id="gChild2Id" />
<s:treenode label="<input type=checkbox name=inputcheckbox id=gChild3Idbox>Spring" id="gChild3Id" />
<s:treenode label="<input type=checkbox name=inputcheckbox id=child51Idbox>xxx" id="child51Id">
<s:treenode label="<input type=checkbox name=inputcheckbox id=gChild11Idbox>fff" id="gChild11Id" />
<s:treenode label="<input type=checkbox name=inputcheckbox id=gChild21Idbox>fffff" id="gChild21Id" />
<s:treenode label="<input type=checkbox name=inputcheckbox id=gChild31Idbox>Ss" id="gChild31Id" />
</s:treenode>
</s:treenode>
</s:tree>
</div>
<div id="displayIt"></div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
