如何使用客户端 API 设置 p:selectOneRadio 的值? [英] How to set the value of p:selectOneRadio with Client Side API?

问题描述

在我的 JSF 视图中，我使用的是 p:selectOneRadio.现在我必须在客户端更改此组件的值作为副作用.在此组件的客户端 API 中，我发现了以下内容，如果我找到了正确的使用方法，我认为可以将其用于此目的:

In my JSF view I am using a p:selectOneRadio. Now I have to change the value of this component on client side as side effect. In the Client Side API of this component I have found the following which I think I could use for this if I find the proper way how to use it:

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 没有太多了解)看起来我必须传递类似于我想要选择的单选按钮实例的东西.我已经尝试了多种方法，但都没有奏效:

To me (without having much knowledge about JS) it looks like I have to pass something similar to an instance of the radio-button I want to select. I have tried this in several ways, but none of them works:

<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).再次没有成功(但在这种情况下并不奇怪)

However, I also tried to pass the value and/or label directly (this works e.g. for selectOneMenu). Again without success (but not surprising in this case)

<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});"/>

有人知道在这里做什么吗?

Anybody knows what to do here?

推荐答案

应该传递的元素是 模拟收音机的观感，这个span有.ui-radiobutton-box 作为 CSS 类，简单的调用是:

The element that should be passed is the <span> which simulates the radio look and feel, this span has .ui-radiobutton-box as CSS class, the simple call would be:

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

这将选择第一个收音机.

但是select 函数将只选择，这不是">预期的行为取消选择之前选定的收音机并选择新收音机.

However the select function would select only, which is not the expected behaviour, the expected one would be unselect the previous selected radio and select the new one.

话虽如此，如果您想根据价值(这更有意义)进行选择，以下方法将有效:

Being that said, if you would like to select based on value (which makes more sense) the following approach would work:

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

在那里选择具有值 1 的单选输入，然后导航到相应的 .ui-radiobutton-box，在那里触发

In there it's selecting the radio input which has the value 1 then navigating to the corresponding .ui-radiobutton-box where it triggers the event defined by the widget. In that way you make sure any ajax related events are called accordingly.

这篇关于如何使用客户端 API 设置 p:selectOneRadio 的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！