如何使用Client Side API设置p:selectOneRadio的值?

时间:2015-01-22 14:35:40

标签: javascript jquery primefaces client-side selectoneradio

在我的JSF视图中,我使用的是p:selectOneRadio。现在我必须在客户端更改此组件的值作为副作用。在这个组件的Client Side API中,我发现以下内容,如果我找到了正确的方法,我认为我可以使用它:

PrimeFaces.widget.SelectOneRadio=PrimeFaces.widget.BaseWidget.extend(
{
    // ...      
    select:function(a){
        this.checkedRadio=a;
        a.addClass("ui-state-active")
         .children(".ui-radiobutton-icon")
         .addClass("ui-icon-bullet").removeClass("ui-icon-blank");
        a.prev().children(":radio").prop("checked",true)}
});

对我来说(没有太多关于JS的知识)看起来我必须传递类似于我想要选择的单选按钮的实例。我已经通过多种方式尝试过这种方法,但它们都不起作用:

<p:selectOneRadio widgetVar="sel" id="id-sel" >                
        <f:selectItem itemValue="#{false}" itemLabel="n/a" />
        <f:selectItem itemValue="#{true}" itemLabel="date" />
</p:selectOneRadio>               

<p:commandButton onclick="PF('sel').select(sel.inputs[1]);"/>
<p:commandButton onclick="PF('sel').select(PF('sel').inputs[1]);"/>
<p:commandButton onclick="PF('sel').select( $('input:radio[id*=id-sel\\:1]') );"/>       
<p:commandButton 
      onclick="PF('sel').select(document.getElementById('menuform:id-sel:1'));"/>  

但是,我也尝试直接传递值和/或标签(这适用于例如selectOneMenu)。再次没有成功(但在这种情况下并不奇怪)

<p:commandButton onclick="PF('sel').select('date');"/>
<p:commandButton onclick="PF('sel').select('true');"/>
<p:commandButton onclick="PF('sel').select(1);"/>
<p:commandButton onclick="PF('sel').select(true);"/>
<p:commandButton onclick="PF('sel').select(#{true});"/>

有人知道该怎么做吗?

1 个答案:

答案 0 :(得分:6)

应该传递的元素是模拟无线电外观的<span>,这个范围有.ui-radiobutton-box作为CSS类,简单的调用将是:

PF('selectOneRadioWV').select($('.ui-radiobutton-box').first())

这将选择第一台电台。

然而,select功能仅选择 expected behaviour,预期的功能将取消选择之前选择的广播和选择新的。

正如那样说,如果你想根据价值选择(这更有意义),下面的方法会起作用:

PF('selectOneRadioWV').jq.find('input:radio[value="1"]').parent().next().trigger('click.selectOneRadio');

在那里,它选择具有值1的无线电输入,然后导航到相应的.ui-radiobutton-box,在那里它触发小部件定义的event。通过这种方式,您可以确保相应地调用任何与ajax相关的事件。