2014-01-13 112 views
1

我有四個支票簿(查看,創建,編輯和刪除)模塊列表。在這種情況下,如果用戶點擊創建複選框或編輯複選框或刪除複選框想自動查看複選框與複選框相同,如果取消選中查看複選框想取消選中create.Edit和Delete automatically。由於我是JSF的新手,請幫助我解決這個問題。在此先感謝JSF selectbooleancheckbox驗證

問候 磨憨

     <p:column headerText="Module ID:"> 
          <h:outputText value="#{modules.moduleID}" /> 
         </p:column> 



         <p:column headerText="Root Module ID:"> 
          <h:outputText value="#{modules.rootID}" /> 
         </p:column> 
         <p:column headerText="Module Description:"> 
          <h:outputText value="#{modules.moduleDescription}" /> 
          </p:column> 
          <p:column headerText="View" > 
           <h:selectBooleanCheckbox id="vi" value="#{roleModule.view[modules.moduleID]}"/> 
          </p:column> 
          <p:column headerText="Create" > 
           <h:selectBooleanCheckbox value="#{roleModule.create[modules.moduleID]}"> 
           <p:ajax update="vi" listener="#{roleModule.permissionCheck}"/> 
           </h:selectBooleanCheckbox> 

          </p:column> 
          <p:column headerText="Edit" > 
           <h:selectBooleanCheckbox value="#{roleModule.edit[modules.moduleID]}"> 
           <p:ajax update="vi" listener="#{roleModule.permissionCheck}"/> 
           </h:selectBooleanCheckbox> 
          </p:column> 
          <p:column headerText="Delete" > 
           <h:selectBooleanCheckbox value="#{roleModule.delete[modules.moduleID]}"> 
           <p:ajax update="vi" listener="#{roleModule.permissionCheck}"/> 
           </h:selectBooleanCheckbox> 
          </p:column> 

        </p:dataTable> 
+0

安置自己嘗試代碼。這將幫助我們,爲您的參考解決 – newuser

+0

我的代碼。謝謝 –

回答

1

我會在jQuery中這樣做,出於某種原因,在視圖上完成所有取消選中和檢查後,將其轉換到服務器端級別是非常基本的舉動。

JS

 $(PrimeFaces.escapeClientId('form:table')) 
     .on("change", 
       "input[type='checkbox'][name*='edit'], input[type='checkbox'][name*='create'], input[type='checkbox'][name*='delete']", 
       function() { 
        var tr = $(this).parent().parent(); 
        var view = tr 
          .find("input[type='checkbox'][name*='view']"); 
        var create = tr 
          .find("input[type='checkbox'][name*='create']"); 
        var edit = tr 
          .find("input[type='checkbox'][name*='edit']"); 
        var deleteBox = tr 
          .find("input[type='checkbox'][name*='delete']"); 
        if ($(this).is(':checked')) { 
         view.prop("checked", true); 
        } else { 
         if (create.is(':checked') || edit.is(':checked') 
           || deleteBox.is(':checked')) { 
          view.prop("checked", true); 
         } else 
          view.prop("checked", false); 
        } 
       }); 

    $(PrimeFaces.escapeClientId('form:table')).on(
     "change", 
     "input[type='checkbox'][name*='view']", 
     function() { 
      var tr = $(this).parent().parent(); 
      var view = tr.find("input[type='checkbox'][name*='view']"); 
      var create = tr.find("input[type='checkbox'][name*='create']"); 
      var edit = tr.find("input[type='checkbox'][name*='edit']"); 
      var deleteBox = tr 
        .find("input[type='checkbox'][name*='delete']"); 
      if ($(this).is(':not(:checked)')) { 
       create.prop("checked", false); 
       edit.prop("checked", false); 
       deleteBox.prop("checked", false); 
      } 
     }); 

請注意:如果你更新的表,你應該重新運行腳本,或者你可以更換,只有形式的ID選擇。像這樣

$(PrimeFaces.escapeClientId('form')).on .... 

當然你應該在$(document).ready()包括代碼。


編輯: 根據您的要求。

我創建了一個小的project on github,您可以下載該項目並查看jQuery(一般JS)如何與JSF一起工作,並且這裏有一個活動的demo

兩個主要文件是main.xhmlcheckBoxesJQuery.js

希望它有幫助。

+0

如果你可以請發表工作代碼,以便它易於理解,因爲我是非常新的JQuery和JSF –

+0

@JSFLearner好吧我已經更新了鏈接到github的帖子.... –

+0

@HatemAlimam做得好GH項目;-) –

0

試試這個,這可能會幫助你 JSF代碼:

<h:selectBooleanCheckbox value="#{bean.viewChecked}" > 
    <a4j:support action="#{bean.viewCheckBoxAction}" event="onclick" reRender="panelId"/> 
</h:selectBooleanCheckbox> 
<h:outputText value="View" /> 

<h:selectBooleanCheckbox value="#{bean.createChecked}" > 
    <a4j:support action="#{bean.createCheckBoxAction}" event="onclick" reRender="panelId"/> 
</h:selectBooleanCheckbox> 
<h:outputText value="Create" /> 

<h:selectBooleanCheckbox value="#{bean.editChecked}" > 
    <a4j:support action="#{bean.editCheckBoxAction}" event="onclick" reRender="panelId"/> 
</h:selectBooleanCheckbox> 
<h:outputText value="Edit" /> 

<h:selectBooleanCheckbox value="#{bean.deleteChecked}" > 
    <a4j:support action="#{bean.deleteCheckBoxAction}" event="onclick" reRender="panelId"/> 
</h:selectBooleanCheckbox> 
<h:outputText value="Delete" /> 

bean代碼:

public String viewCheckBoxAction() 
    { 
     if(!viewChecked) // while view is unchecked then uncheck all the others 
     { 
      editChecked = false; 
      deleteChecked = false; 
      createChecked = false; 
     } 

     return null; 
    } 


    public String createCheckBoxAction() 
    { 
     viewCheckManage(); 
     return null; 
    } 


    public String editCheckBoxAction() 
    { 
     viewCheckManage(); 
     return null; 
    } 


    public String deleteCheckBoxAction() 
    { 
     viewCheckManage(); 
     return null; 
    } 

    private void viewCheckManage() 
    { 
     if(createChecked || deleteChecked || editChecked) // while any one is checked then view also checked 
     { 
      viewChecked = true; 
     } 
     else 
     { 
      viewChecked = false; 
     } 
    } 
+0

相同的概念不與我合作。並且爲了您的信息,實際上我在primefaces數據表中使用了動態複選框 –

+0

我嘗試了單個測試。您可以獲取當前行的索引,然後將bean值傳遞給方法。 – newuser

+0

如果您可以請張貼您的JSF代碼以瞭解更多信息。在此先感謝 –

0

你可以嘗試這樣的事情

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:p="http://primefaces.org/ui" 
    xmlns:pe="http://primefaces.org/ui/extensions"> 
<h:head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Test</title> 
</h:head> 
<h:body> 

    <h:form id="form"> 
    <p:dataTable value="#{roleModule.modulesList}" var="module" id="table"> 
     <p:column headerText="Module ID:"> 
      <h:outputText value="#{module.moduleID}" /> 
     </p:column> 
     <p:column headerText="Root Module ID:"> 
      <h:outputText value="#{module.rootID}" /> 
     </p:column> 
     <p:column headerText="Module Description:"> 
      <h:outputText value="#{module.moduleDescription}" /> 
     </p:column> 
     <p:column headerText="View"> 
      <h:selectBooleanCheckbox id="view" value="#{module.view}"> 
       <p:ajax update=":form:table" listener="#{roleModule.permissionCheck}" /> 
      </h:selectBooleanCheckbox> 
     </p:column> 
     <p:column headerText="Create"> 
      <h:selectBooleanCheckbox id="create" value="#{module.create}"> 
       <p:ajax update=":form:table" listener="#{roleModule.permissionCheck}" /> 
      </h:selectBooleanCheckbox> 

     </p:column> 
     <p:column headerText="Edit"> 
      <h:selectBooleanCheckbox id="edit" value="#{module.edit}"> 
       <p:ajax update=":form:table" listener="#{roleModule.permissionCheck}" /> 
      </h:selectBooleanCheckbox> 
     </p:column> 
     <p:column headerText="Delete"> 
      <h:selectBooleanCheckbox id="delete" value="#{module.delete}"> 
       <p:ajax update=":form:table" listener="#{roleModule.permissionCheck}" /> 
      </h:selectBooleanCheckbox> 
     </p:column> 

     </p:dataTable> 
    </h:form> 
</h:body> 
</html> 

,如果你的模塊是一個實體bean,你可能希望你的註釋與複選框@Transient

屬性
import java.io.Serializable; 


public class Module implements Serializable { 
    private static final long serialVersionUID = 176253618089501709L; 
    private String moduleID,rootID,moduleDescription; 
    private boolean view,edit,delete,create; 

    public String getModuleID() { 
     return moduleID; 
    } 

    public void setModuleID(String moduleID) { 
     this.moduleID = moduleID; 
    } 

    public String getRootID() { 
     return rootID; 
    } 

    public void setRootID(String rootID) { 
     this.rootID = rootID; 
    } 

    public String getModuleDescription() { 
     return moduleDescription; 
    } 

    public void setModuleDescription(String moduleDescription) { 
     this.moduleDescription = moduleDescription; 
    } 

    public boolean isView() { 
     return view; 
    } 

    public void setView(boolean view) { 
     this.view = view; 
    } 

    public boolean isEdit() { 
     return edit; 
    } 

    public void setEdit(boolean edit) { 
     this.edit = edit; 
    } 

    public boolean isDelete() { 
     return delete; 
    } 

    public void setDelete(boolean delete) { 
     this.delete = delete; 
    } 

    public boolean isCreate() { 
     return create; 
    } 

    public void setCreate(boolean create) { 
     this.create = create; 
    } 

    @Override 
    public String toString() { 
     return "Module [moduleID=" + moduleID + ", rootID=" + rootID + ", moduleDescription=" + moduleDescription + ", view=" + view + ", edit=" + edit + ", delete=" + delete + ", create=" + create + "]"; 
    } 

} 

最後

import java.io.Serializable; 
import java.util.ArrayList; 
import java.util.List; 

import javax.annotation.PostConstruct; 
import javax.faces.bean.ManagedBean; 
import javax.faces.bean.ViewScoped; 
import javax.faces.component.UIInput; 
import javax.faces.context.FacesContext; 
import javax.faces.event.AjaxBehaviorEvent; 


@ManagedBean 
@ViewScoped 
public class RoleModule implements Serializable{ 

    private static final long serialVersionUID = 1L; 

    private List<Module> modulesList; 

    @PostConstruct 
    public void init() { 
     modulesList = new ArrayList<Module>(); 

     Module m1 = new Module(); 
     m1.setModuleID("1"); 
     m1.setRootID("root"); 
     m1.setModuleDescription("desc1"); 
     modulesList.add(m1); 

     Module m2 = new Module(); 
     m2.setModuleID("2"); 
     m2.setRootID("root"); 
     m2.setModuleDescription("desc2"); 
     modulesList.add(m2); 
    } 

    public void permissionCheck(AjaxBehaviorEvent event){ 
     Boolean value = (Boolean) ((UIInput) event.getComponent()).getValue(); 

     UIInput component = ((UIInput) event.getComponent()); 

     FacesContext context = FacesContext.getCurrentInstance(); 
     Module module = context.getApplication().evaluateExpressionGet(context, "#{module}", Module.class); 

     System.out.println(module+","+value+","+component.getId()); 

     switch(component.getId()){ 
      case "create": 
      case "delete":   
      case "edit": 
       if (value){ 
        module.setView(true); 
       } 
       break; 
      case "view": 
       if (!value){ 
        module.setCreate(false); 
        module.setDelete(false); 
        module.setEdit(false); 
       } 
     } 
    } 

    public List<Module> getModulesList() { 
     return modulesList; 
    } 

    public void setModulesList(List<Module> modulesList) { 
     this.modulesList = modulesList; 
    } 

} 

更新:有點錯誤

   //try as non-string using equal 

       Path pathFilterNonString = getPath(filter.getKey(), site, siteType); 
       Class pathType = pathFilterNonString.getJavaType(); 

       if (pathType.equals(Long.class)){ 
        try{ 
         filterCondition = cb.and(filterCondition, cb.equal(pathFilterNonString, Long.valueOf(filter.getValue()))); 
        }catch(java.lang.NumberFormatException nfe){ 
         //ignore 
         //java.lang.NumberFormatException: For input string: "a" 
        } 
       }else if (pathType.equals(Timestamp.class)){ 
        try{ 
         filterCondition = cb.and(filterCondition, cb.equal(pathFilterNonString, Timestamp.valueOf(filter.getValue()))); 
        }catch(java.lang.IllegalArgumentException e){ 
         //ignore 
         //java.lang.IllegalArgumentException: Timestamp format must be yyyy-mm-dd hh:mm:ss[.fffffffff] 
        } 

       } 
+0

感謝萊昂納多Kenji先生,你的代碼工作正常 –

+0

Leonardo Kenji先生, –

0

您可以使用複選框的的onchange屬性,並添加JavaScript的代碼一樣document.getElementByID('formID:tableID:lineID:boxID').checked=true