获取 p:selectOneRadio 值给一个 JS 函数
Get p:selectOneRadio value to a JS function
我有一个 PF 的 selectOneRadio 来选择要下载的文件类型。我还有一个 commandButton 可以使用 onclick 属性调用下载 servlet。问题是当我选择文件类型并单击按钮时,选择的值当然还没有提交。我正在寻找某种方法来在单击下载按钮时获取可用的所选值。
这是我的代码:
<p:selectOneRadio id="sorType" value="#{bean.type}" layout="custom">
<f:selectItem itemLabel="XML" itemValue="XML" />
<f:selectItem itemLabel="XLS" itemValue="XLS" />
<f:selectItem itemLabel="CSV" itemValue="CSV" />
</p:selectOneRadio>
<p:commandButton type="button" ajax="false" onclick="return downloadFile('#{bean.type}');" />
如果要在客户端检查所选值,则需要为 p:selectOneRadio
定义 widgetVar
属性,例如:
<p:selectOneRadio widgetVar="widgetSorType" id="sorType" value="#{bean.type}"
layout="custom">
<f:selectItem itemLabel="XML" itemValue="XML" />
<f:selectItem itemLabel="XLS" itemValue="XLS" />
<f:selectItem itemLabel="CSV" itemValue="CSV" />
</p:selectOneRadio>
这样可以轻松找到该元素 - 然后您可以进一步使用它来检查实际选择了哪个值。我可以看到两个选项:
function getSelectedTypeVer1() {
return PF('widgetSorType').getJQ().find(':checked').val() || "";
}
function getSelectedTypeVer2() {
var inputs = PF('widgetSorType').inputs;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
return inputs[i].value;
}
}
return "";
}
Select 无论哪种方法更适合您 - 两者都将 return 选择的值或空字符串,以防未选择任何内容。所以剩下的就是在你的按钮 onclick
中调用它,例如:
<p:commandButton type="button" ajax="false"
onclick="return downloadFile(getSelectedTypeVer1());" />
在 PrimeFaces 5.2 上测试
@Sva.Mu分享的解决方案对我不起作用。
我有一个与 PrimeFaces Showcase 中的最后一个展示非常相似的实现,其中一些 <p:radioButton>
指向自定义布局 <f:selectItem>
。
我成功地 PF('widgetName').inputs.filter(':checked').val();
以某种方式合并了两种方法,而不是使用 PF('widgetName').getJQ().find(':checked').val();
。
我的 PrimeFaces 版本:6.1
我有一个 PF 的 selectOneRadio 来选择要下载的文件类型。我还有一个 commandButton 可以使用 onclick 属性调用下载 servlet。问题是当我选择文件类型并单击按钮时,选择的值当然还没有提交。我正在寻找某种方法来在单击下载按钮时获取可用的所选值。
这是我的代码:
<p:selectOneRadio id="sorType" value="#{bean.type}" layout="custom">
<f:selectItem itemLabel="XML" itemValue="XML" />
<f:selectItem itemLabel="XLS" itemValue="XLS" />
<f:selectItem itemLabel="CSV" itemValue="CSV" />
</p:selectOneRadio>
<p:commandButton type="button" ajax="false" onclick="return downloadFile('#{bean.type}');" />
如果要在客户端检查所选值,则需要为 p:selectOneRadio
定义 widgetVar
属性,例如:
<p:selectOneRadio widgetVar="widgetSorType" id="sorType" value="#{bean.type}"
layout="custom">
<f:selectItem itemLabel="XML" itemValue="XML" />
<f:selectItem itemLabel="XLS" itemValue="XLS" />
<f:selectItem itemLabel="CSV" itemValue="CSV" />
</p:selectOneRadio>
这样可以轻松找到该元素 - 然后您可以进一步使用它来检查实际选择了哪个值。我可以看到两个选项:
function getSelectedTypeVer1() {
return PF('widgetSorType').getJQ().find(':checked').val() || "";
}
function getSelectedTypeVer2() {
var inputs = PF('widgetSorType').inputs;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
return inputs[i].value;
}
}
return "";
}
Select 无论哪种方法更适合您 - 两者都将 return 选择的值或空字符串,以防未选择任何内容。所以剩下的就是在你的按钮 onclick
中调用它,例如:
<p:commandButton type="button" ajax="false"
onclick="return downloadFile(getSelectedTypeVer1());" />
在 PrimeFaces 5.2 上测试
@Sva.Mu分享的解决方案对我不起作用。
我有一个与 PrimeFaces Showcase 中的最后一个展示非常相似的实现,其中一些 <p:radioButton>
指向自定义布局 <f:selectItem>
。
我成功地 PF('widgetName').inputs.filter(':checked').val();
以某种方式合并了两种方法,而不是使用 PF('widgetName').getJQ().find(':checked').val();
。
我的 PrimeFaces 版本:6.1