checkbox与dataTable的完美结合

本文介绍了richface的一种使用情况：datatable和checkbox的结合。

rich:dataTable是很不错的web控件。但如果编写如下图效果的业务，必须结合checkbox来使用。

现附上代码，然后分析

Html代码 

1. <rich:dataTable id="carList" width="555px" rows="#{usr.pageSize}" value="#{usr.dataList}" var="car"   
2.                             rowClasses="dataListRow1, dataListRow2" rowKeyVar="row">  
3.                 <f:facet name="header">  
4.                     <rich:columnGroup>  
5.                         <h:column>  
6.                             <h:selectBooleanCheckbox id="all" οnclick="selectAll(#{usr.scrollerPage},#{usr.pageSize});"/>  
7.                         </h:column>  
8.   
9.                         <h:column>  
10.                             <h:outputText styleClass="headerText" value="RowNum" />  
11.                         </h:column>  
12.   
13.                         <h:column>  
14.                             <h:outputText styleClass="headerText" value="Name" />  
15.                         </h:column>  
16.                         <h:column>  
17.                             <h:outputText styleClass="headerText" value="Decription" />  
18.                         </h:column>  
19.                         <h:column>  
20.                             <h:outputText styleClass="headerText" value="Base Price" />  
21.                         </h:column>  
22.   
23.                         <h:column>  
24.                             <h:outputText styleClass="headerText" value="操作" />  
25.                         </h:column>  
26.                     </rich:columnGroup>  
27.                 </f:facet>  
28.   
29.                 <h:column>  
30.                     <h:selectBooleanCheckbox id="cbox" value="#{car.checked}"/>  
31.                 </h:column>  
32.                 <h:column>  
33.                     <h:outputText value="#{row}" />  
34.                 </h:column>  
35.                 <h:column>  
36.                     <h:outputText value="#{car.name}" />  
37.                 </h:column>  
38.                 <h:column>  
39.                     <h:outputText value="#{car.description}" />  
40.                 </h:column>  
41.                 <h:column>  
42.                     <h:outputText value="#{car.baseprice}" />  
43.                 </h:column>  
44.   
45.                 <h:column>  
46.                     <h:commandLink action="#{usr.delete}" value="删除" >  
47.                         <f:param name="id" value="#{car.id}"/>  
48.                     </h:commandLink>  
49.                 </h:column>  
50.             </rich:dataTable>  
51.   
52.             <rich:datascroller for="carList" id="dc1" style="width:480px" page="#{usr.scrollerPage}" οnclick="antiSelect();" reRender="formlist"/>  

这里的关键问题是全选。经过google和自己的摸索，总结如下：

Html代码 

1. οnclick="selectAll(当前分页序号,每页多少条记录);"  

注意：

如果使用xhtml，js代码请写入独立文件并在页面中引入：

Java代码 

1. <a4j:loadScript src="${pageContext.request.contextPath}/scripts/directory.js" />  

 否则，直接写在xhtml页面，会报错：

The content of elements must consist of well-formed character data or markup

原因我不确知，可能是xhtml解析问题。

js代码如下

Js代码 

1. function selectAll(page,size) {  
2.     var checkAll=document.getElementById('formlist:carList:all').checked;  
3.   
4.     for(var i=0;i<=10; i++){  
5.         var seq = (page-1)* size + i;  
6.         var checkBox = document.getElementById('formlist:carList:'+seq+':cbox');//formlist:carList:0:cbox  
7.   
8.         //alert("checkAll="+checkAll);  
9.         //alert("page="+page+" size="+size+" i="+i+" seq="+seq);  
10.         if(checkAll)  
11.             checkBox.checked=true;  
12.         else  
13.             checkBox.checked=false;  
14.     }  
15. }  
16.   
17. function antiSelect(){  
18.     document.getElementById('formlist:carList:all').checked=false;  
19. }  

此前，我google的代码如下，在该死的ie下不能执行。为此，我扣了半天行号问题。

Js代码 

1. function selectAll() {  
2.          var rows = document.getElementById('formlist:carList').rows;  
3.          var currentState = rows[0].cells[0].childNodes[0].checked;  
4.          var i;  
5.          for (i in rows) {  
6.              i++;  
7.              if (currentState) {  
8.                 rows[i].cells[0].childNodes[0].checked=true;  
9.              } else if (!currentState) {  
10.                 rows[i].cells[0].childNodes[0].checked=false;  
11.              }  
12.          }  
13.      }  

 经测试，该码全浏览器支持！