PrimeLists OrderList中的面板

Question

我想使用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>

问题在于，每次切换其中一个面板时，所有面板都会最小化并最大化几次，即如果列表中有三个元素，则所有面板将最大化/最小化三次。我错了吗？

Answer 1

那么，取决于您是否真的需要重新排序功能。如果你有能力没有它，我会尝试ui：repeat而不是p：orderList。它为每个div生成原始ID，因此您当时只能切换一个面板。希望它有所帮助

修改 我做了一个自定义的“toggler”，所以你可以分别在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> 

也许有更好的解决方案，但我相信你明白了。希望它有所帮助。