컴포넌트를 추가/제거하여 Ajax 기반 페이지 매김을 처리 할 수있는 JSF2 컴포넌트가 있습니까?

Question

사용 사례는 다음과 같습니다. 이전 행을 렌더링하지 않고 클릭당 10 개의 새 행을 렌더링하고 싶습니다. 그래서 이론적으로, 다음 10 행 (빈 상태)을 참조하는 추가 패널 그룹을 항상 렌더링하는 구성 요소를 갖고 싶습니다. 사용자가 클릭하면이 패널 그룹 만 ID없이 다시 렌더링되고 새 빈 패널 그룹은 해당 ID가있는 하단에 추가됩니다.

처리 할 수있는 상자 JSF 태그가 있습니까? 아니면 사용자 정의 태그/렌더러에 직접 들어가야합니까?

내 테스트에 따르면 UI : repeat는 항상 전체 목록을 반복하며 태그 내에서 부분 업데이트 (렌더링)를 수행 할 수 없었습니다. 부분 렌더링을 지원하지 않는다고 말할 수있는 것에서 태그.

Rich/Primefaces/tomahawk와 같은 프레임 워크를 추가하고 싶지 않습니다.

최신 Mojarra를 사용하고 있습니다.

Answer 1

작업을 수행 할 수있는 JSF의 기본 구성 요소를 모르지만 가능한 해결 방법을 생각해 볼 수 있습니다.

기본적으로, 당신은 미리 정의 된 id에 빈 자리가이 AJAX를 <h:commandButton>의 호출과 HTML DOM 나중에 업데이트 될 때, 자바 스크립트를 통해 내용을 이동을 통해 채울 수있을 수 있습니다. 한 가지 유의 사항 : JSF 구성 요소에 ID를 할당 할 때 <h:dataTable> 또는 <ui:repeat>과 같은 접근 방식을 어린이의 식별자를 제어하므로 naming containers과 함께 사용하는 것이 좋습니다. 마지막으로 요소에 정의 된 스타일 클래스 만 남겨 둡니다. 기본 예제는 아래에 나와 있습니다.

뷰 :

<h:form id="form"> 
    <h:panelGroup id="basic"> 
     <ul class="basic-list"> 
      <ui:repeat var="data" value="#{bean.basicList}"> 
       <li class="data-class">#{data.value}</li> 
      <ui:repeat> 
     </ul> 
    <h:panelGroup> 
    <h:panelGroup id="additional"> 
     <ul class="additional-list"> 
      <ui:repeat var="data" value="#{bean.additionalList}"> 
       <li class="data-class">#{data.value}</li> 
      <ui:repeat> 
     </ul> 
    <h:panelGroup> 
    <h:commandButton value="Load 10 more rows"> 
     <f:ajax render="additional" onevent="replaceData" listener="#{bean.loadAdditionalData}"/> 
    </h:commandButton> 
</h:form> 

빈 (bean) :

@ManagedBean 
@ViewScoped 
public class Bean implements Serializable { 

    private List<Data> basicList;//getter+setter 
    private List<Data> additionalList;//getter+setter 

    @PostConstruct 
    public void init() { 
     basicList = new ArrayList<Data>();//populate first rows of data from somewhere 
    } 

    public void loadAdditionalData(AjaxBehaviorEvent event) { 
     additionalList = new ArrayList<Data>();//populate additional rows of data from somewhere 
     basicList.addAll(additionalList);//just for a possible postback 
    } 

} 

자바 스크립트 :

function replaceData(data) { 
    if(data.status == 'success') { 
     var toAppend = $('#additional-list').html(); 
     $('#basic-list').append(toAppend); 
    } 
}