Question

当我想在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事件，如何知道检查了哪些项目？

谢谢

Answer 1

在Primefaces 4中，pickList只有传输事件，在Primefaces 5.2中添加了select / unselect事件

来自文档：

Ajax行为事件

PickList提供传输作为默认和唯一的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     
    }
}

<强>更新

要捕获select / unselect事件，您可以绑定到复选框，单击事件

<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传递params：

Pass parameter to p:remoteCommand from JavaScript

<p：ajax>事件：p：pickList中不支持select

1 个答案: