0

PrimeFaces 4.0 で select および unselect イベントをキャッチしようとすると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 は、アイテムが 1 つのリストから別のリストに移動されたときに発生する、デフォルトで唯一の ajax 動作イベントとして transfer を提供します。以下の例は、このイベントの使用方法を示しています。

<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 リスナーを呼び出す必要がある場合は、2 つの remoteCommands を追加して、クリック コールバックで関数を呼び出すことができます。

<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 に答える