Primefaces OrderList 내의 패널

p : orderList 및 p : 패널 구성 요소를 사용하여 목록 요소의 재정렬을 구현하고 싶습니다. 처음에는 목록에 POJO가 있었지만 문자열 목록에도 문제가 발생했습니다.Primefaces OrderList 내의 패널

내 콩이 :

public class BackingBean { 

    private List<String> list; 

    public void addDate() { 
     list.add(new Date().toString()); 
    }  

    // Getters and setters... 
}

내 페이지 소스 :

<p:orderList id="videos" value="#{bean.list}" var="date" itemValue="#{date}" 
    controlsLocation="none"> 
    <p:column > 
     <p:panel header="#{date}" toggleable="true" toggleSpeed="500"> 
      FC Barcelona is one of only three clubs... 
     </p:panel> 
    </p:column> 
</p:orderList>

문제는 때마다 내가 패널 중 하나를 전환하는 것이, 모든 패널을 최소화하고 몇 번을 극대화하고, 즉, 목록에 세 개의 요소가있는 경우 모든 패널이 최대화/최소화 될 것입니다. 내가 잘못?

출처

2012-03-08 nikagra

orderedList 내에 widgetVar가있는 여러 패널이 지원됩니까? javascript 변수 "panel"이 목록의 모든 패널에 사용 된 것 같습니다. 당신은 방화범에 그것을 밖으로 확인할 수 있습니다. – djmj

@djmj가 옳다고 생각합니다. 왜 당신은'widgetVar' 속성을 지정합니까? 자바 스크립트에서 어딘가에 사용합니까? –

위젯은 'widgetWar'없이도 발생합니다. primefaces 포럼에 대한 답변을 얻었습니다. "문제는 목록의 모든 패널이 동일한 ID를 가지므로 전환이 모든 패널을 전환합니다"입니다. 하지만 나는 패널 대신 무엇을 사용해야하는지 모른다. – nikagra

정말로 재정리 기능이 필요한 경우에 따라 다릅니다. 그것없이 갈 수 있다면, 나는 ui를 시도 할 것이다 : p : orderList 대신에 반복한다. 모든 div에 대해 원래 ID를 생성하므로 그 시점에 하나의 패널 만 토글 할 수 있습니다. 희망 하시겠습니까?

EDIT : p : orderList에서도 패널을 전환 할 수 있도록 사용자 정의 "토글러"를 만들었습니다.

 <p:orderList id="videos" value="#{yourBean.list}" var="dataItem" itemValue="#{dataItem}" 
        controlsLocation="none"> 
      <p:column> 
       <p:panel id="togglePanel"> 
         <f:facet name="header"> 
          <h:outputText value="#{dataItem}" /> 
          <p:commandButton value="+" onclick="showToggle(this)" style="float: right;"/> 
          <p:commandButton value="-" onclick="hideToggle(this)" style="float: right;"/> 
          <div style="clear: both"/> 
         </f:facet> 
        <div> 
         FC Barcelona is one of only three clubs... 
        </div> 
       </p:panel> 
      </p:column> 
     </p:orderList>

그리고 간단한 스크립트 :

<script type="text/javascript"> 

function hideToggle(param) { 
    jQuery(param).closest("div").next().slideUp('slow',null);  
} 
function showToggle(param) { 
    jQuery(param).closest("div").next().slideDown('slow',null);  
} 

</script>

어쩌면 더 좋은 해결책이 있지만, 난 당신이 포인트를 얻을 생각합니다. 희망이 도움이되었습니다.

출처

2012-04-07 19:40:16 Fallup

Primefaces OrderList 내의 패널

답변

관련 문제