本文介绍了richface的一种使用情况:datatable和checkbox的结合。
rich:dataTable是很不错的web控件。但如果编写如下图效果的业务,必须结合checkbox来使用。
现附上代码,然后分析
Html代码
- <rich:dataTable id="carList" width="555px" rows="#{usr.pageSize}" value="#{usr.dataList}" var="car"
- rowClasses="dataListRow1, dataListRow2" rowKeyVar="row">
- <f:facet name="header">
- <rich:columnGroup>
- <h:column>
- <h:selectBooleanCheckbox id="all" οnclick="selectAll(#{usr.scrollerPage},#{usr.pageSize});"/>
- </h:column>
- <h:column>
- <h:outputText styleClass="headerText" value="RowNum" />
- </h:column>
- <h:column>
- <h:outputText styleClass="headerText" value="Name" />
- </h:column>
- <h:column>
- <h:outputText styleClass="headerText" value="Decription" />
- </h:column>
- <h:column>
- <h:outputText styleClass="headerText" value="Base Price" />
- </h:column>
- <h:column>
- <h:outputText styleClass="headerText" value="操作" />
- </h:column>
- </rich:columnGroup>
- </f:facet>
- <h:column>
- <h:selectBooleanCheckbox id="cbox" value="#{car.checked}"/>
- </h:column>
- <h:column>
- <h:outputText value="#{row}" />
- </h:column>
- <h:column>
- <h:outputText value="#{car.name}" />
- </h:column>
- <h:column>
- <h:outputText value="#{car.description}" />
- </h:column>
- <h:column>
- <h:outputText value="#{car.baseprice}" />
- </h:column>
- <h:column>
- <h:commandLink action="#{usr.delete}" value="删除" >
- <f:param name="id" value="#{car.id}"/>
- </h:commandLink>
- </h:column>
- </rich:dataTable>
- <rich:datascroller for="carList" id="dc1" style="width:480px" page="#{usr.scrollerPage}" οnclick="antiSelect();" reRender="formlist"/>
这里的关键问题是全选。经过google和自己的摸索,总结如下:
Html代码
- οnclick="selectAll(当前分页序号,每页多少条记录);"
注意:
如果使用xhtml,js代码请写入独立文件并在页面中引入:
Java代码
- <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代码
- function selectAll(page,size) {
- var checkAll=document.getElementById('formlist:carList:all').checked;
- for(var i=0;i<=10; i++){
- var seq = (page-1)* size + i;
- var checkBox = document.getElementById('formlist:carList:'+seq+':cbox');//formlist:carList:0:cbox
- //alert("checkAll="+checkAll);
- //alert("page="+page+" size="+size+" i="+i+" seq="+seq);
- if(checkAll)
- checkBox.checked=true;
- else
- checkBox.checked=false;
- }
- }
- function antiSelect(){
- document.getElementById('formlist:carList:all').checked=false;
- }
此前,我google的代码如下,在该死的ie下不能执行。为此,我扣了半天行号问题。
Js代码
- function selectAll() {
- var rows = document.getElementById('formlist:carList').rows;
- var currentState = rows[0].cells[0].childNodes[0].checked;
- var i;
- for (i in rows) {
- i++;
- if (currentState) {
- rows[i].cells[0].childNodes[0].checked=true;
- } else if (!currentState) {
- rows[i].cells[0].childNodes[0].checked=false;
- }
- }
- }
经测试,该码全浏览器支持!