h를 선택하는 방법 h : dataTable의 selectOneRadio가 포스트 백에서 선택 상태로 유지됩니까? 이 같은 정상적인 상황에서

Question

:

<h:form>   
    <h:selectOneRadio value="#{bean.gender}"> 
     <f:selectItem itemValue="Male" itemLabel="Male" /> 
     <f:selectItem itemValue="Female" itemLabel="Female" /> 
     <f:selectItem itemValue="Other" itemLabel="Other" /> 
    </h:selectOneRadio> 
    <h:commandButton value="Submit" action="#{bean.action}" /> 
    </h:form> 

하나 개의 라디오 버튼을 선택하면 라디오 버튼이 다시 게시에 선택된 상태됩니다 다른 & disselects. (동일한 뷰가 렌더링 될 때)

그러나 <h:dataTable>과 같은 반복 구성 요소를 처리 할 때는 선택이 손실됩니다.

니펫 고려 : 하나 개의 라디오 버튼이 간단하여 구현되고 선택 될 때, 다른 라디오 버튼 disselecting으로

 <h:form id="hashMapFormId">   
      <b>HASH MAP:</b> 
      <h:dataTable value="#{playersBean.dataHashMap.entrySet()}" var="t" border="1"> 
       <h:column> 
        <f:facet name="header">Select</f:facet> 
        <h:selectOneRadio id="radiosId" onclick="deselectRadios(this.id);" 
             value="#{playersBean.select}"> 
         <f:selectItem itemValue="null"/> 
        </h:selectOneRadio> 
       </h:column> 
      </h:dataTable> 
      <h:commandButton value="Show Hash Map Selection" 
          action="#{playersBean.showSelectedPlayer()}" /> 
     </h:form> 

을 JavaScript-

  function deselectRadios(id) { 

       var f = document.getElementById("hashMapFormId"); 
       for (var i = 0; i < f.length; i++) 
       { 
        var e = f.elements[i]; 
        var eid = e.id; 
        if (eid.indexOf("radiosId") !== -1) { 
         if (eid.indexOf(id) === -1) { 
          e.checked = false; 
         } else { 
          e.checked = true; 
         } 
        } 
       } 
      } 

화재 GET 요구 :

라디오 버튼 선택 :

당신은 라디오 버튼 창피는 포스트 백에 선택 얻을 것을 볼 :

지금 제출 버튼, 응답을 누릅니다. 이 단점을 해결하는 방법?

나는이이 구성 요소의 속성 itemValuenull 것에 기인 매우 잘 알고

<f:selectItem itemValue="null"/> 

Answer 1

이 트릭은 JSF의 1.x에서/2.0/2.1이 불가능했다 때 사용할에서 남은입니다 <h:dataTable>에서 단일 행 선택을위한 <h:selectOneRadio>. 이 트릭은 10 살짜리 블로그 기사 Using Datatables - Select row by radio button에서 시작되었습니다.

근본적인 문제는 HTML 라디오 버튼이 name 속성을 기준으로 그룹화되어 웹 브라우저가 선택할 때 선택 해제 할 다른 사람을 알 수 있다는 것입니다. 그러나 JSF는 행 인덱스가 인라인 된 각 <h:dataTable> 항목마다 다른 디자인을 생성하므로 그룹화 할 수 없으므로 JavaScript 기반 해결 방법을 사용할 수 없습니다.

새로운 passthrough elements and attributes 기능이있는 JSF 2.2 이후로 name 속성을 원하는 값으로 강제 설정하고 보조자 <h:inputHidden>을 통해 선택한 항목을 캡처 할 수 있습니다. 이것은 작년의 다른 블로그 기사에서 구체화되었습니다 : Custom layout with h:selectOneRadio in JSF 2.2. 이 기사에서는 <ui:repeat>을 예로 들며, 다음과 같이 다시 <h:dataTable>으로 다시 쓸 수 있습니다.

@Named 
@ViewScoped 
public class Bean implements Serializable { 

    private List<Item> items; 
    private Long selectedItemId; 

    // ... 

    public void submit() { 
     System.out.println("Selected item ID: " + selectedItemId); 
    } 

    // ... 
} 

<h:form> 
    <h:dataTable value="#{bean.items}" var="item"> 
     <h:column> 
      <input type="radio" jsf:id="item" a:name="#{hiddenItem.clientId}" 
       value="#{item.id}" a:checked="#{item.id eq bean.selectedItemId ? 'checked' : null}" /> 
     </h:column> 
     <h:column>#{item.id}</h:column> 
     <h:column>#{item.name}</h:column> 
    </h:dataTable> 
    <h:inputHidden id="selectedItem" binding="#{hiddenItem}" value="#{bean.selectedItemId}" 
     rendered="#{facesContext.currentPhaseId.ordinal ne 6}" /> 
    <h:commandButton id="submit" value="Submit" action="#{bean.submit}" /> 
</h:form> 

그리고 네, 선택된 라디오 버튼은 포스트 백에이 방법을 선택된 상태로 유지됩니다. 전체 엔티티를 전달할 수도 있습니다.이 경우에만 <h:inputHidden>에 변환기가 필요합니다.