checkbox与dataTable的完美结合

本文介绍了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" 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和自己的摸索，总结如下：

onclick="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;
             }
         }
     }

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