日期:2014-05-16  浏览次数:20572 次

在JSF dataTable中实现selecteBooleanCheckbox全选效果.

前端页面部分代码:

?

<h:commandLink action="#{ADManagementAuditListPMG.disAndselectAll(true)}" value="全部选中"/>    
            <h:commandLink action="#{ADManagementAuditListPMG.disAndselectAll(false)}" value="全部取消"/>   
  
<h:dataTable var="manager" value="#{ADManagementAuditListPMG.dataModel}">   
                    <h:column>   
                        <f:facet name="header"><h:outputText value="选择" /></f:facet>   
                        <h:selectBooleanCheckbox value="#{manager.selected}" disabled="#{!RenderController.av.getAccessRight('PassButton',row.userid)}"  id="id#{manager.selected}">   
                            <f:ajax event="change" listener="#{manager.updateSelected}"/>//自定义选择时使用ajax更新selected状态   
                        </h:selectBooleanCheckbox>   
                    </h:column>   
</h:dataTable>  

?

ManagerBean中的全选方法:

public void disAndselectAll(boolean selected) {   
                List<MemberDataAuditDTO> userList = (List<MemberDataAuditDTO>) dataModel.getWrappedData();   
                for (MemberDataAuditDTO user : userList) {   
                        user.setSelected(selected);   
                }   
 }  
?

?

MemberDataAuditDTO中部分代码:

public class MemberDataAuditDTO implements Serializable {   
  
    private static final long serialVersionUID = 1L;   
       
    private boolean selected;   
  
    public MemberDataAuditDTO() {   
    }   
  
    public boolean getSelected() {   
        return selected;   
    }   
  
    public void setSelected(boolean selected) {   
        this.selected = selected;   
    }   
    //ajax调用该方法更新selected状态   
    public void updateSelected(){   
        System.out.println("selected"+selected);   
         if(!selected){   
            selected = true;   
         }else{;   
         }   
    }  

?

以上全选、多选实现使用了纯JSF技术,经过两天的验证发现点问题,以及可以简化的解决方法。

问题:因为复选框使用了权限设置,没有权限的用户登录复选框置灰,不能选择,但使用JSF全选的方法,

disable=true,复选框置灰只是显示而已,全选依然能够选中该复选框,也就是说失去了权限设置的意

义。

修改后的代码如下:

全选JS代码

?

/**  
 * 复选框全选/全部取消对应的JS方法  
 * @param formName 表单名称,  
 * @param dtName dataTable名称,  
 * @param checked 是否选中,true为选中,false为取消  
 */  
function SetCheckedStatus(formName,dtName,checked)   
{   
    var oTableName = formName+':'+dtName;   
    var oTable=document.getElementById(oTableName);   
    if(oTable != null)   
    {   
        for(j=1;j<oTable.rows.length;j++)   
        {   
            oTable.rows[j].cells[0].childNodes[0].checked=checked;//选中复选框   
            oTable.rows[j].cells[0].childNodes[0].onchange();//触发复选框中onchange事件,进行状态的提交   
        }   
    }   
}  

?

?

JSF代码:

<a href="#" mce_href="#" onclick="SetCheckedStatus('form1','dt1',true);">全部选中</a>   
            <a href="#" mce_href="#" onclick="SetCheckedStatus('form1','dt1',false);">全部取消</a>   
  
<h:dataTable id="dt1" var="manager" value="#{ADManagementAuditListPMG.dataModel}">   
                    <h:column>   
                        <f:facet name="header"><h:outputText value="选择" /></f:facet>   
                        <h:selectBooleanCheckbox value="#{manager.selected}"  disabled="#{!RenderController.av.getAccessRight('PassButton',row.userid)}"  onchange="submit();">   
                        </h:selectBooleanCheckbox>   
                    </h:column>  

?

?

此方法只需在DTO中建立相应的 boolean selected; 字段即可。