我在表格中显示了页面列表。每个页面都有属性 homePage ,我希望在数据表中有一列单选按钮绑定在这个属性上,并且用户只能检查一个值。如何在服务器端获取此值?
我看到了一些如下示例:http: //jforum.icesoft.org/JForum/posts/list/14157.page,但我想知道在这种情况下最佳做法是什么。
我在表格中显示了页面列表。每个页面都有属性 homePage ,我希望在数据表中有一列单选按钮绑定在这个属性上,并且用户只能检查一个值。如何在服务器端获取此值?
我看到了一些如下示例:http: //jforum.icesoft.org/JForum/posts/list/14157.page,但我想知道在这种情况下最佳做法是什么。
根据JSF 规范问题 329,我终于为 JSF 2.3 实现了它。使用新group
属性,您现在可以在转发器组件中对单选按钮进行分组。
<h:dataTable value="#{bean.items}" var="item">
<h:column>
<h:selectOneRadio group="foo" value="#{bean.selectedItem}">
<f:selectItem itemValue="#{item}" />
</h:selectOneRadio>
</h:column>
</h:dataTable>
它将按照 Mojarra 2.3.0-m07 提供。
在 JSF 2.3 之前,这对于标准 JSF 来说并非易事<h:selectOneRadio>
。基本上,每一行中的单选按钮都需要使用相同的输入相互分组,name
以便在您选择一个单选按钮时取消选中其他单选按钮。但是它们没有被分组,它们都有自己的name
,所以其他单选按钮永远不会被取消选中。
PrimeFaces 等组件库通过提供特殊的属性或列组件解决了这个问题。另请参阅此展示示例,该示例使用 a<p:column selectionMode="single">
生成单个选择列。所选值由 的selection
属性引用<p:dataTable>
。如果您已经在使用组件库并且它已经为您提供了这样的组件,那么您应该使用它。
在标准 JSF<h:dataTable>
中,<h:selectOneRadio>
您需要引入一个 JavaScript 解决方法,如下所示,取消选中同一列中的所有其他单选按钮:
<h:dataTable value="#{bean.items}" var="item">
<h:column>
<h:selectOneRadio valueChangeListener="#{bean.setSelectedItem}"
onclick="dataTableSelectOneRadio(this);">
<f:selectItem itemValue="null" />
</h:selectOneRadio>
</h:column>
...
</h:dataTable>
和
public void setSelectedItem(ValueChangeEvent event) {
FacesContext context = FacesContext.getCurrentInstance();
selectedItem = context.getApplication().evaluateExpressionGet(context, "#{item}", Item.class);
}
和
function dataTableSelectOneRadio(radio) {
var radioId = radio.name.substring(radio.name.lastIndexOf(':'));
for (var i = 0; i < radio.form.elements.length; i++) {
var element = radio.form.elements[i];
if (element.name.substring(element.name.lastIndexOf(':')) == radioId) {
element.checked = false;
}
}
radio.checked = true;
}
我找到了另一个解决方案,我想与你分享,是使用h:selectBooleanCheckbox
,以及 BalusC 建议的单选 JS 函数:
<ace:column id="homePage" headerText="Home Page">
<h:selectBooleanCheckbox value="#{adpage.homePage}" onclick="dataTableSelectOneRadio(this);"></h:selectBooleanCheckbox>
</ace:column>
和JS:
function dataTableSelectOneRadio(radio) {
var radioId = radio.name.substring(radio.name.lastIndexOf(':'));
for (var i = 0; i < radio.form.elements.length; i++) {
var element = radio.form.elements[i];
if (element.name.substring(element.name.lastIndexOf(':')) == radioId) {
element.checked = false;
}
}
radio.checked = true;
}
这将只选中一个复选框并更新选中/未选中对象中的布尔属性。
selectedRadioButton 变量应该在函数之外声明。
var selectedRadioButton;
function uncheckRadioButtons(radioButton) {
if (selectedRadioButton != null) {
selectedRadioButton.checked = false;
}
selectedRadioButton = radioButton;
selectedRadioButton.checked = true;
}
并在 xhtml
<h:selectOneRadio
onclick="uncheckRadioButtons(this);">
<f:selectItem itemValue="null" />
</h:selectOneRadio>