利用JS实现JSF页面h:selectOneMenu的联动

 一、背景阐述

  页面利用dataTable显示多行记录，一行记录记录着一个用户的信息，其中用户状态的那个column用<h:selectOneMenu>显示，以便可以任意更改其状态。此外，由于同一用户可能在不同部门，所以，页面上可能会有多行记录，显示的是同一用户的信息，只是部门的值不同。

    所以，现在就需要实现这样一个功能：当一个用户的状态改变了，页面上所有属于这个用户的记录的status column的值都要改变成新改好的状态。

二、解决思路

    在每行记录的h:selectOneMenu后面标记一个h:inputHidden来存储userId的值，利用οnchange="changeUserStatus(this);"得到改变了状态的user的userId和user的新状态，然后遍寻整个页面的每行记录的h:inputHidden中的userId，如果和改变的userId一样，就说明是同一个user，则改变该条记录的user状态，否则不变。


三、实现方法

 1.页面代码：

1. <h:form id=“form”>
2. <t:dataTable id="custRecordList" var="user"  value="#{backbeanName.custRecordList}" 
3.         styleClass=" " footerClass=" " headerClass=" "  columnClasses="" rowClasses=""
4.         align="center" cellpadding="4"  cellspacing="0" border="0" rows="45">
5.     <t:column>
6.         <f:facet name="header">
7.             <h:outputText value="User Status" />
8.         </f:facet>
9.         <h:selectOneMenu id="status" value="#{user.userStatus}"onchange="changeUserStatus(this);">
10.             <f:selectItems value="#{backbeanName.userStatusSelectItems}"/>
11.        </h:selectOneMenu>
12.         <h:inputHidden id="userIdHidden" value="#{user.userId}" />
13.     </t:column>
14. </t:dataTable>
15. 
    
17. <t:dataScroller id="scroller" for="custRecordList" style="position:relative;left:40px"
18.         fastStep="10" pageCountVar="pageCount" pageIndexVar="pageIndex" paginator="true" 
19.         paginatorMaxPages="10" paginatorActiveColumnStyle="font-weight:bold;text-decoration:none;" renderFacetsIfSinglePage="false">
20. <f:facet name="first">
21.     <t:graphicImage id="firstImg" url="/shared/images/pagination/first.gif" border="1" />
22. </f:facet>
23. <f:facet name="last">
24.     <t:graphicImage id="lastImg" url="/shared/images/pagination/last.gif" border="1" />
25. </f:facet>
26. <f:facet name="previous">
27.     <t:graphicImage id="prevImg" url="/shared/images/pagination/previous.gif" border="1" />
28. </f:facet>
29. <f:facet name="next">
30.     <t:graphicImage id="nextImg" url="/shared/images/pagination/next.gif" border="1" />
31. </f:facet>
32. <f:facet name="fastforward">
33.     <t:graphicImage id="ffImg" url="/shared/images/pagination/fforward.gif" border="1" />
34. </f:facet>
35. <f:facet name="fastrewind">
36.     <t:graphicImage id="frImg" url="/shared/images/pagination/fbackward.gif" border="1" />
37. </f:facet>
38. </t:dataScroller>
39. </h:form>

 2.JS代码：

1. <script type="text/javascript">
2.     //<![CDATA[
3.         function changeCustStatus(obj){
4.             var userId = obj.nextSibling.value;  //得到h:selectOneMenu的下一个标签（h:inputHidden）的value
5.             var userStaus = obj.value;  //得到h:selectOneMenu的value
6.             var firstSelectComponentId=document.getElementsByTagName("select")[0].id;  //得到每页第一行记录的h:selectOneMenu的id
7.             var rowNum=firstSelectCompId.split(":");  //rowNum[2]为每页第一行记录在整个custRecordList里的第几行
8.             var n=parseInt(rowNum[2])+parseInt(45);  //得到每页做后一行记录在整个custRecordList里的第几行
9.             var unchangeUserId;
11.             for(var i=rowNum[2];i<n;i++){
12.                 unchangeUserId=document.getElementById("form:custRecordList:"+i+":userIdHidden").value;
13.                 if(unchangeUserId==userId){
14.                     document.getElementById("form:custRecordList:"+i+":status").value=userStaus; 
15.                             
16.                 }
17.             }
18.         }
19.     //]]>
20. </script> 

四、附录-该问题的特点

    值得注意的是，在页面上，jsf会自动给dataTable的每行的元素赋一个id，即如果<h:selectOneMenu id="status"/>,则h:selectOneMenu显示在页面上的id=“form名：dataTable名：该记录在list中所在的条数：status”。而且，由于dataTable要显示近千条record在一张页面上是不好看的，所以利用t:dataScroller让每页只显示45条，这样我们每次就要知道当前页的第一条记录的id和做后一条记录的id，从而确定查询的范围。