0

当我想在 PrimeFaces 4.0 中捕获选择和取消选择事件时p:pickList出现错误<p:ajax> Event:select is not supported.

<p:pickList  showCheckbox="true" id="pickList"  value="#{ctrl.elts}" var="elt" itemLabel="#{elt}" itemValue="#{elts}" >
    <f:facet name="sourceCaption">A</f:facet>
    <f:facet name="targetCaption">B</f:facet>

    <p:ajax event="select" listener="#{ctrl.select}"  />
    <p:ajax event="unselect" listener="#{ctrl.onUnselect}" />
</p:pickList>


public class ctrl implements Serializable {
public void select(SelectEvent event) {
     System.out.println(event.getObject().toString());
}

public void onUnselect(UnselectEvent event) {
     System.out.println(event.getObject().toString());
}

...

所以，我想知道如果我不能使用 Select 和 unSelect 事件，如何知道检查了哪些项目？

谢谢

4

1 回答 1

1

在 Primefaces 4 中，pickList 仅具有传输事件，在 Primefaces 5.2 中添加了选择/取消选择事件

从文档：

Ajax 行为事件

PickList 提供 transfer 作为默认且唯一的 ajax 行为事件，该事件在项目从一个列表移动到另一个列表时触发。下面的示例演示了如何使用此事件。

<p:pickList value="#{pickListBean.cities}" var="city"
         itemLabel="#{city}" itemValue="#{city}">
    <p:ajax event="transfer" listener="#{pickListBean.handleTransfer}" />
</p:pickList>

public class PickListBean {
    //DualListModel code
    public void handleTransfer(TransferEvent event) {
             //event.getItems() : List of items transferred
             //event.isAdd() : Is transfer from source to target
             //event.isRemove() : Is transfer from target to source     
    }
}

更新：

要捕获选择/取消选择事件，您可以绑定到复选框单击事件

<p:pickList widgetVar="pick" showCheckbox="true" id="pickList"  value="#{ctrl.elts}" var="elt" itemLabel="#{elt}" itemValue="#{elts}" >
    <f:facet name="sourceCaption">A</f:facet>
    <f:facet name="targetCaption">B</f:facet>
</p:pickList>

<script>
    $(function(){
        PF('pick').checkboxes.each(function(){
            $(this).bind("click", function(){
                var checked = $(this).find("> span.ui-icon-check").length > 0
                if ( checked ){
                    alert('checked');
                } else {
                    alert('unchecked');
                }
            });
        });
    });
</script>

然后，如果您需要调用 bean 侦听器，您可以添加两个 remoteCommands 并调用 click 回调中的函数

<p:pickList widgetVar="pick" showCheckbox="true" id="pickList"  value="#{ctrl.elts}" var="elt" itemLabel="#{elt}" itemValue="#{elts}" >
    <f:facet name="sourceCaption">A</f:facet>
    <f:facet name="targetCaption">B</f:facet>
</p:pickList>

<p:remoteCommand name="select" actionListener="#{ctrl.select}" />
<p:remoteCommand name="unselect" actionListener="#{ctrl.onUnselect}" />

<script>
    $(function(){
        PF('pick').checkboxes.each(function(){
            $(this).bind("click", function(){
                var checked = $(this).find("> span.ui-icon-check").length > 0
                if ( checked ){
                    select();
                } else {
                    unselect();
                }
            });
        });
    });
</script>

显然，侦听器不能接受 SelectEvent/UnselectEvent，但是如果需要，可以使用 remoteCommand 传递参数：

从 JavaScript 将参数传递给 p:remoteCommand

于 2016-07-21T14:26:40.940 回答