Primefaces Панели внутри OrderList - PullRequest
Новая
       18

Primefaces Панели внутри OrderList

3 голосов
/ 08 марта 2012

Я хотел бы реализовать переупорядочение элементов списка с использованием компонентов p: orderList и p: panel.Изначально в списке были POJO, но проблема возникает даже со списком строк.

Мой бин: 

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>

Проблема в том, что каждый раз, когда я переключаю одну из панелей, все панели минимизируются и максимизируются несколько раз, т.е. если в списке три элемента, то все панели будут максимизированы / минимизированы три раза.Я не прав?

1 Ответ

2 голосов
/ 07 апреля 2012

Ну, зависит, действительно ли вам нужна функция переупорядочения. Если вы можете позволить себе обойтись без него, я бы попробовал ui: repeat вместо p: orderList. Он генерирует оригинальный идентификатор для каждого div, так что вы сможете переключать только одну панель за раз. Надеюсь, это поможет

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>

Может быть, есть более удачное решение, но я верю, что вы поняли. Надеюсь, это помогло.

...