<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page contentType="text/html;charset=gb2312"%>
<%@ taglib uri="
http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="
http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="
http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="
http://java.sun.com/jsf/core" prefix="f"%>
<f:view>
<html>
<head>
<title>ajaxTree</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
// Add click event listener to each checkbox in the tree page
// Note! Using this simple selector assumes that there are no other
// checkboxes on the page, if there are other checkboxes then
// selector should be changed
jQuery(":checkbox").click(function(){
updateChildren(this);
});
});
</script>
<script type="text/javascript">
function updateChildren(currentCheckBox)
{
// Get state of current checkbox (true or false)
var state = currentCheckBox.checked;
// Get parent TABLE, where current checkbox is places
var parentTables = jQuery(currentCheckBox).parents("table");
var parentTable = parentTables[0];
// Get DIV where child nodes with checkboxes are situated
// See
http://docs.jquery.com/Traversing/ to get better uderstanding of
// parents() and next()
var childDivs = jQuery(parentTable).next("div");
var childDiv = childDivs[0];
// Iterate over all child nodes checkboxes and set same state as the
// current checkbox state
jQuery(childDiv).contents().find(":checkbox").each(function() {
this.checked = state;
});
}
</script>
</head>
<body>
<p>
Ajax check box tree 使用JBoss Richfaces 与 JQuery 实现
</p>
<br />
<h:form>
<a4j:keepAlive beanName="ajaxTreeBean"></a4j:keepAlive>
<rich:panel header="Ajax树:">
<!-- 定义树,与后台bean根节点值绑定 -->
<rich:tree style="width:300px" value="#{ajaxTreeBean.treeNode}"
var="item" nodeFace="#{item.type}" switchType="ajax"
ajaxSubmitSelection="true" reRender="selectedNod"
nodeSelectListener="#{ajaxTreeBean.processSelection}">
<!-- 定义子节点,根据节点type分类 -->
<rich:treeNode type="latn" iconLeaf="/images/tree/singer.gif"
icon="/images/tree/singer.gif">
<h:selectBooleanCheckbox onclick="updateChildren(this)"
value="#{item.selected}"></h:selectBooleanCheckbox>
<h:outputText value="#{item.latn_name}" />
</rich:treeNode>
<rich:treeNode type="area" iconLeaf="/images/tree/disc.gif"
icon="/images/tree/disc.gif">
<h:selectBooleanCheckbox onclick="updateChildren(this)"
value="#{item.selected}"></h:selectBooleanCheckbox>
<h:outputText value="#{item.area_name}" />
</rich:treeNode>
<rich:treeNode type="substation" iconLeaf="/images/tree/song.gif"
icon="/images/tree/song.gif">
<h:selectBooleanCheckbox onclick="updateChildren(this)"
value="#{item.selected}"></h:selectBooleanCheckbox>
<h:outputText value="#{item.substation_name}" />
</rich:treeNode>
<rich:treeNode type="community" iconLeaf="/images/tree/song.gif"
icon="/images/tree/song.gif">
<h:selectBooleanCheckbox onclick="updateChildren(this)"
value="#{item.selected}"></h:selectBooleanCheckbox>
<h:outputText value="#{item.community_name}" />
</rich:treeNode>
</rich:tree>
</rich:panel>
<rich:panel header="您选择的节点为:" rendered="true">
<h:outputText id="selectedNod" value="#{ajaxTreeBean.nodeTitle}"></h:outputText>
</rich:panel>
<h:commandButton action="#{ajaxTreeBean.go}" value="Here we go!!!"></h:commandButton>
</h:form>
</body>
</html>
</f:view>
回复 更多评论