??? 標題太長,不知道怎么用更準確的語言來形容這個,呵呵:) 初學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="<%@taglib uri="<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>
因為時間原因也懶的寫一個完整的應用了,不過我想有以上的代碼也夠了,畢竟這里只是解決一個小問題.