使用JSF的事件机制实现复选框的全选

一般在类似于struts，webwork这样的基于请求的框架来说，实现复选框的全部选择需要借助javascript来完成。但对于jsf这样基于事件的框架来说，实现复选框的权限可以通过jsf本身提供的一些功能来完成。

下面就做一个简单的利用jsf的事件机制实现checkbox的全选功能。

首先定义一个pojo类，代码如下所示

package com.zxyg.jsf.model;

public class User {

	private String username;

	private String password;

	/** 为了实现全选,必须定义一个boolean的变量 **/
	private boolean selected;

	public boolean isSelected() {
		return selected;
	}

	public void setSelected(boolean selected) {
		this.selected = selected;
	}

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

}

这里要说明的是，由于jsf是基于前台向后台传递事件来达到某些功能，所以我要在User类里面定义一个boolean的变量用来表示是否选择上。

接下来定义后台的BackingBean，代码如下

package com.zxyg.jsf.backingbean;

import java.util.ArrayList;
import java.util.List;

import javax.faces.event.ActionEvent;
import javax.faces.model.DataModel;
import javax.faces.model.ListDataModel;

import com.zxyg.jsf.model.User;

public class UserBean {

	private DataModel dataModel;

	private boolean selectAll;

	public UserBean() {
		dataModel = new ListDataModel();
	}

	/**
	 * dataModel中加入数
	 * 这里用了一个集合来模拟从数据库中去出来的数据
	 * @return
	 */
	public String queryData() {
		List<User> userList = new ArrayList<User>();
		for (int i = 0; i < 10; i++) {
			User user = new User();
			user.setUsername("hello" + i);
			user.setPassword("abc" + i);
			userList.add(user);
		}
		dataModel.setWrappedData(userList);
		return "selectAll";
	}

	public DataModel getDataModel() {
		return dataModel;
	}

	/**
	 * 这里接受处理页面的监听方法,
	 * 点击后是否全选或取消全选
	 * @param event
	 */
	public void disAndselectAll(ActionEvent event) {
		List<User> userList = (List<User>) dataModel.getWrappedData();
		for (User user : userList) {
			user.setSelected(selectAll);
		}

	}

	public void setDataModel(DataModel dataModel) {
		this.dataModel = dataModel;
	}

	public boolean isSelectAll() {
		return selectAll;
	}

	public void setSelectAll(boolean selectAll) {
		this.selectAll = selectAll;

	}

}

faces-config.xml配置文件如下

<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
	version="1.2">

	<managed-bean>
		<managed-bean-name>userBean</managed-bean-name>
		<managed-bean-class>
			com.zxyg.jsf.backingbean.UserBean
		</managed-bean-class>
		<managed-bean-scope>session</managed-bean-scope>
	</managed-bean>

	<navigation-rule>
		<navigation-case>
			<from-outcome>selectAll</from-outcome>
			<to-view-id>/select_all.jsp</to-view-id>
		</navigation-case>
	</navigation-rule>
</faces-config>

后台准备工作结束后，下面是前端页面代码，代码如下

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<f:view>
	<h:form>
		<h:dataTable var="user" value="#{userBean.dataModel}">
			<h:column>
				<f:facet name="header">
					<h:commandLink actionListener="#{userBean.disAndselectAll}">
						<h:selectBooleanCheckbox value="#{userBean.selectAll}"></h:selectBooleanCheckbox>
					</h:commandLink>
				</f:facet>
				<h:selectBooleanCheckbox value="#{user.selected}"></h:selectBooleanCheckbox>
			</h:column>
			<h:column>
				<f:facet name="header">
					<h:outputText value="username">
					</h:outputText>
				</f:facet>
				<h:outputText value="#{user.username}"></h:outputText>
			</h:column>

			<h:column>
				<f:facet name="header">
					<h:outputText value="password"></h:outputText>
				</f:facet>
				<h:outputText value="#{user.password}"></h:outputText>
			</h:column>

		</h:dataTable>
	</h:form>
</f:view>

都搞定以后，跑起来看下。全选功能都实现了，如下图所示。