本文介绍了richface的一种使用情况:datatable和checkbox的结合。
rich:dataTable是很不错的web控件。但如果编写如下图效果的业务,必须结合checkbox来使用。
现附上代码,然后分析
<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和自己的摸索,总结如下:
οnclick="selectAll(当前分页序号,每页多少条记录);"
注意:
如果使用xhtml,js代码请写入独立文件并在页面中引入:
<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代码如下
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下不能执行。为此,我扣了半天行号问题。
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; } } }
经测试,改代码全浏览器支持!