<!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>
  
回复  更多评论