【问题标题】:How to set the value of p:selectOneRadio with Client Side API?如何使用客户端 API 设置 p:selectOneRadio 的值?
【发布时间】:2015-03-21 09:28:45
【问题描述】:

在我的 JSF 视图中,我使用的是 p:selectOneRadio。现在我必须在客户端更改此组件的值作为副作用。在此组件的客户端 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});"/>

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

【问题讨论】:

    标签: javascript jquery primefaces client-side selectoneradio


    【解决方案1】:

    应该传递的元素是模拟收音机外观的&lt;span&gt;,这个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 相关的事件。

    【讨论】:

    • tyvm,现在我搞定了!在我的具体示例中正确转义应该是PF('sel').jq.find('input:radio[value=false]').parent().next().trigger('click.selectOneRadio');
    • 有了这个帮助,我想现在我什至可以在客户端 API 中扩展 Widget 以获得更舒适的使用 :)
    猜你喜欢
    • 1970-01-01
    • 2016-08-10
    • 2023-02-03
    • 1970-01-01
    • 2021-11-19
    • 2019-10-26
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多