标题太长,不知道怎么用更准确的语言来形容这个,呵呵:) 初学jsf时遇到不少的问题,比如在客端视图中有一个<table>标签的一列均是<input type="checkbox" />标签如
<table><tr><td><input type="checkbox" /></td><td>name</td></tr><tr><td><input ="checkbox" /></td><td>name</td></tr><table> .要实现所有的<input>标签的全选在jsp中我们可以给所有<input>标签的name属性赋一个相同的值再用javascript进行循环处理就可以了. 但是在jsf中就不是那么容易的事了,因为jsf会给所有的<input>标签生成一个不相同值的id属性和一个不同值name属性.
来看看jsf中的解决方案
jsf中 <h:dataTable> 通常绑定一个ListDataModel 或者是ArrayDataModel等数据模型.而该数据模型通常封装List,或都Array之类的对象,这些对象的元素都是一些bean 对象,把数据库中表的字段映射成bean 再给该bean添加一个额外boolean型的属性,用来绑定 <h:selectBooleanCheckbox>组件,在backing bean中就可以通过判断这个绑定值来处理<h:dataTable>组件选中的行对应的数据模型所拥有的bean了. 那么如何在页面实现<input type="checkbox"/>的全选呢,还是用javascript 只是javascript要先对<table>标签进行操作了 这就没jsp中那么直观. js代码
</script><script language="javascript" type="">
function SetCheckedStatus()
{
var oTable=document.all['fors:data'];
var oChkAll=document.all['fors:selectall']
if(oTable != null && oChkAll != null)
{
for(j=1;j<oTable.rows.length;j++)
{
oTable.rows(j).cells(0).children.item(0).checked=oChkAll.checked;
}
}
}
</script>
jsf页面代码:
<%@page contentType="text/html; charset=GB2312"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<html>
<head>
<script type="" src="css/screen.js"></script>
<script language="javascript" type="">
pressed="fail";
function setPress(newValue){
pressed=newValue;
}
function confirmSubmit(){
if(pressed=="add"){
wid =calculateCenterWidth(340);
hi=calculateCenterHeight(160);
popup=window.open("adduser.faces","popup","height=160,width=340,toolbar=no,left="+wid+",top="+hi+",menubar=no,scrollbars=no");
popup.focus();
return false;
}
if(pressed=="del"){
return confirm("确定要删除吗?");
}
if(pressed=="save"){
return confirm("确定要修改吗?");
}
}
</script><script language="javascript" type="">
function SetCheckedStatus()
{
var oTable=document.all['fors:data'];
var oChkAll=document.all['fors:selectall']
if(oTable != null && oChkAll != null)
{
for(j=1;j<oTable.rows.length;j++)
{
oTable.rows(j).cells(0).children.item(0).checked=oChkAll.checked;
}
}
}
</script><link href="css/styles3.css" rel="stylesheet" type="text/css"/>
<title>用户管理</title>
</head>
<body bgcolor="#ffffff">
<f:view>
<h:form id="fors" onsubmit="return confirmSubmit()">
<h:panelGrid id="top" cellspacing="0" cellpadding="0" width="100%" border="0" columns="3" columnClasses="left,topMiddle,right">
<h:graphicImage value="images/jiao1.gif"/>
<h:outputText value=""/>
<h:graphicImage value="images/jiao2.gif"/>
</h:panelGrid>
<h:panelGrid cellspacing="0" cellpadding="0" width="100%" border="0" columnClasses="middleLeft,btstyle,middleRight" columns="3">
<h:outputText value=""/>
<h:panelGroup>
<!-- 数据-->
<h:panelGrid id="act" columns="1" cellpadding="0" cellspacing="0" width="100%" border="0" columnClasses="btstyle">
<h:panelGroup>
<h:selectBooleanCheckbox id="selectall" onclick="SetCheckedStatus()"/>
<h:outputLabel for="selectall">
<h:outputText value="全选"/>
</h:outputLabel>
<h:commandButton value="编辑" onclick="setPress('editor')"/>
<h:commandButton value="删除" onclick="setPress('del')" actionListener="#{function.delUserTriggered}"/>
<h:commandButton value="增加" onclick="setPress('add')"/>
<h:commandButton value="保存" onclick="setPress('save')" actionListener="#{function.saveUserTriggered}"/>
</h:panelGroup>
</h:panelGrid>
<h:dataTable id="data" value="#{function.userInfoModel}" var="user" width="100%" border="1" cellpadding="0" cellspacing="0">
<h:column>
<f:facet name="header">
<h:outputText id="headerText1" value="选择"/>
</f:facet>
<h:selectBooleanCheckbox id="selectBooleanCheckbox1" value="#{user.editor}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText id="headerText7" value="登录名"/>
</f:facet>
<h:outputText value="#{user.username}" rendered="#{not user.editor}"/>
<h:inputText value="#{user.username}" rendered="#{user.editor}"> </h:inputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText id="headerText2" value="用户名"/>
</f:facet>
<h:outputText value="#{user.name}" rendered="#{not user.editor}"/>
<h:inputText value="#{user.name}" rendered="#{user.editor}"> </h:inputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText id="headerText3" value="用户密码"/>
</f:facet>
<h:outputText value="********" rendered="#{not user.editor}"> </h:outputText>
<h:inputSecret id="inputSecret1" value="#{user.password}" redisplay="true" rendered="#{user.editor}"/>
<h:message for="inputSecret1"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText id="headerText4" value="性别"/>
</f:facet>
<h:outputText value="#{user.xingbie}" rendered="#{not user.editor}"/>
<h:selectOneListbox id="selectOneListbox1" size="1" value="#{user.xingbie}" rendered="#{user.editor}" style="width:100px">
<f:selectItems value="#{function.xinbeiList}"/>
</h:selectOneListbox>
<h:message for="selectOneListbox1"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText id="headerText5" value="岗位"/>
</f:facet>
<h:outputText value="#{user.gangwei}" rendered="#{not user.editor}"/>
<h:inputText value="#{user.gangwei}" rendered="#{user.editor}"> </h:inputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText id="headerText6" value="部门"/>
</f:facet>
<h:outputText value="#{user.bumen}" rendered="#{not user.editor}"/>
<h:inputText value="#{user.bumen}" rendered="#{user.editor}"> </h:inputText>
</h:column>
</h:dataTable>
<!-- 数据-->
</h:panelGroup>
<h:outputText value=""/>
</h:panelGrid>
<table id="fors:bottom" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="left">
<img src="images/jiao3.gif" alt=""/>
</td>
<td class="bottomMiddle"> </td>
<td class="right">
<img src="images/jiao4.gif" alt=""/>
</td>
</tr>
</tbody>
</table>
</h:form>
</f:view>
</body>
</html>
因为时间原因也懒的写一个完整的应用了,不过我想有以上的代码也够了,毕竟这里只是解决一个小问题.