Question

checkbox列，怎么添加到datatable中

Answer 1

<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" onclick="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}" onclick="antiSelect();" reRender="formlist"/>

这里的关键问题是全选。经过google和自己的摸索，总结如下：
Html代码
onclick="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;
}
}
}