1

ピックリスト ターゲット リストのアイテムがユーザーによって選択されたときに、コンポーネントを再レンダリングしたいと考えています。

それ、どうやったら出来るの？

更新 (2013 年 12 月 17 日)

ここでこの問題の完全な解決策を説明しました - http://leonotepad.blogspot.com.br/2013/12/primefaces-capturing-target-list-item.html

ありがとう@Hatemあなたの答えなしではこれを解決できませんでした。

基本的に、それはこれでした：

ap:selectMany コンポーネントによって ap:ajax 更新イベントを使用してフィルター処理された ap:pickList を持つ @ViewScoped マネージド Bean があります。

このような

<p:outputLabel for="siteFilter" value="Site Filter:" style="width:100px;"/>
<p:selectOneMenu converter="#{siteTypeConverter}" id="siteFilter" value="#{myMB.selectedSiteType}" style="width:200px;">              
   <f:selectItem itemLabel="Select Site Type" itemValue="#{null}" />
   <f:selectItems value="#{myMB.siteTypeFilterList}" var="st" itemLabel="#{st.name}" itemValue="#{st}" />
   <p:ajax update="sites" listener="#{myMB.handleSiteTypeFilterChange}" oncomplete="rebindClicks()"/>
</p:selectOneMenu>

<p:outputLabel for="sites" value="Sites:" style="width:100px;"/>
<p:pickList
   widgetVar="xyzabc"
   id="sites"
   value="#{myMB.sites}"
   var="site"                 
   converter="#{siteConverter}"
   itemLabel="#{site.siteType.name}.#{site.name}"
   itemValue="#{site}" />

ここでの考え方は、ユーザーが pickList ターゲット リスト項目をクリックしたときに新しいイベントをトリガーすることです。

したがって、@Hatem で提案されているように、クリック イベントを各ターゲット要素にバインドする必要があります。このような

(...)
   <p:remoteCommand name="updateCommand" action="#{myMB.updateAccounts}" update="accounts"/>
</h:form>
<h:outputScript library="js" name="pickListHack.js" />   
(...)

フォームの後に追加する必要があることに注意してください。

pickListHack.js は WebContent/resources/js/pickListHack.js にあります。

function rebindClicks() {
    xyzabc.jq.on('click','.ui-picklist-target li',function(){
        var item = $(this).attr('data-item-value');
        alert(item);
        updateCommand([{name:'param', value:item}]);
   });
};

$(document).ready(function() {
    rebindClicks();
});

ここでの秘訣は、更新イベントの後、バインドが失われるため、更新後にバインドを再バインドする必要があるようです。そのため、p:ajax には oncomplete イベントがあります。

最後に、ユーザーがターゲット リストの要素をクリックすると、p:remoteCommand で宣言された updateCommand が呼び出されます。

選択した項目が「param」というパラメーターとして渡されることに注意してください。このパラメーターは、次のようにマネージド Bean に戻されます。

public void updateAccounts(){
   String value = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("param");
   System.out.println(">"+value);
   this.accounts = value;
}

この場合、値は単なる ID です。これは、siteConverter がオブジェクトに対して行うことだからです。

@ManagedBean
@RequestScoped
public class SiteConverter implements Converter,Serializable{
    private static final long serialVersionUID = -194442504109002565L;

    @EJB
    private MyEJB myEJB;

    @Override
    public Object getAsObject(FacesContext arg0, UIComponent arg1, String arg2)
            throws ConverterException {

        if (arg2 != null){
            Site s = myEJB.getSiteById(Long.parseLong(arg2));
            return s;
        }else{
            return null;
        }
    }

    @Override
    public String getAsString(FacesContext arg0, UIComponent arg1, Object arg2)
            throws ConverterException {

        if (arg2 != null){
            Site s = (Site)arg2;
            return String.valueOf(s.getId());
        }else{
            return null;
        }
    }
}
4

1 に答える 1

1

この方法でそれを行う必要があります。

リモートコマンド

<p:remoteCommand name="updateCommand" update="componentId" />

p:ピックリスト

<p:pickList id="pickList" widgetVar="pickListVar" value="#{pickListBean.cities}" 
 var="city" itemLabel="#{city}" itemValue="#{city}" />

JS

$(document).ready(function() {
   PF('pickListVar').jq.on('click','.ui-picklist-target li',function(){
       updateCommand();//remoteCommand to update
       //and you can get the item value and lable
       $(this).attr('data-item-value');
       $(this).attr('data-item-lable');
   });
});

編集：

また、pickList が別のコンポーネントによって定期的に更新されると、クリック イベントが失われてしまいます。

この場合、pickList の親コンテナ コンポーネントでクリックをバインドすることができます。

例えば：

 $('#formId').on('click','.ui-picklist-target li',function(){
       updateCommand();//remoteCommand to update
       //and you can get the item value and lable
       $(this).attr('data-item-value');
       $(this).attr('data-item-lable');
   });

ただし、他のコンポーネントがフォーム全体を更新した場合は、イベント バインディングが失われます。

于 2013-12-16T21:29:02.997 に答える