如何使用客户端API设置p:selectOneRadio的值?

问题描述

在我的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>，它模拟广播外观，该跨度作为CSS类具有.ui-radiobutton-box，简单的调用将是:

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并触发事件.这样，您可以确保相应地调用所有与ajax相关的事件.

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的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！