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" ο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;
             }
         }
     }

 经测试,改代码全浏览器支持!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值