我正在尝试做一个搜索表单，根据所选项目，您可以按开始到结束或月份和年份进行搜索
是否可以使用 Facelets 制作这样的表单？ 使用偏好 SelectOneRadio
alt text http://img837.imageshack.us/img837/5357/imageoq.png
【问题讨论】：
这是可行的。您想在<h:selectOneMenu> 中使用<f:ajax> 在更改（单击）单选按钮时重新呈现表单。您可以为此使用 @form 标识符。
然后，在 input 和 select 元素中，您想让disabled 属性依赖于单选按钮的选择。
因为h:selectOneRadio 本身会呈现HTML <table>，所以最棘手的部分可能是把它全部布置好。要将它们很好地组合在一起，您希望将内容拆分到另一个表格的单元格中，并将 CSS vertical-align: top 应用于包含 h:selectOneRadio 的 td 元素。
无论如何，这里有一个完整的工作示例可以帮助您入门：
<h:form id="form">
<h:panelGrid columns="2">
<h:selectOneRadio id="type" value="#{bean.type}" layout="pageDirection" required="true">
<f:selectItems value="#{bean.types}" var="type" itemValue="${type}" itemLabel="" />
<f:ajax event="click" render="@form" />
</h:selectOneRadio>
<h:panelGrid columns="4">
<h:outputLabel for="inputStartDate" value="Start Date" />
<h:inputText id="inputStartDate" value="#{bean.startDate}" required="true" disabled="#{bean.type != 'INPUT'}">
<f:convertDateTime type="date" pattern="yyyy-MM-dd" />
</h:inputText>
<h:outputLabel for="inputEndDate" value="End Date" />
<h:inputText id="inputEndDate" value="#{bean.endDate}" required="true" disabled="#{bean.type != 'INPUT'}">
<f:convertDateTime type="date" pattern="yyyy-MM-dd" />
</h:inputText>
<h:outputLabel for="selectMonth" value="Select Month" />
<h:selectOneMenu id="selectMonth" value="#{bean.month}" required="true" disabled="#{bean.type != 'SELECT'}">
<f:selectItem itemLabel="Select One" />
<f:selectItems value="#{bean.months}" />
</h:selectOneMenu>
<h:outputLabel for="selectYear" value="Select Year" />
<h:selectOneMenu id="selectYear" value="#{bean.year}" required="true" disabled="#{bean.type != 'SELECT'}">
<f:selectItem itemLabel="Select One" />
<f:selectItems value="#{bean.years}" />
</h:selectOneMenu>
<h:panelGroup />
<h:panelGroup />
<h:commandButton value="Submit" action="#{bean.submit}" />
<h:panelGroup />
</h:panelGrid>
</h:panelGrid>
<h:messages />
</h:form>
这是 bean 的样子：
@ManagedBean
@ViewScoped
public class Bean {
private enum Type {
INPUT, SELECT
}
private Type type;
private Date startDate;
private Date endDate;
private Integer month;
private Integer year;
// All with getters and setters.
private List<Type> types = Arrays.asList(Type.values());
private List<SelectItem> months = new ArrayList<SelectItem>();
private List<Integer> years = new ArrayList<Integer>();
// All with just getters.
public Bean() {
String[] monthNames = new DateFormatSymbols().getMonths();
for (int i = 0; i < 12; i++) {
months.add(new SelectItem(i, monthNames[i]));
}
for (int i = 2000; i <= 2020; i++) {
years.add(i);
}
}
public void submit() {
switch (type) {
case INPUT:
System.out.printf("Start Date: %tF, End Date: %tF%n", startDate, endDate);
break;
case SELECT:
System.out.printf("Month: %s, Year: %d%n", months.get(month).getLabel(), year);
break;
}
}
// Getters and setters here.
}
以下是如何应用 CSS 使单选按钮在顶部对齐：
#form td { vertical-align: top; }
【讨论】：
当然。
创建常规 div/css 表。单选按钮显示在一个 div 中，如下所示：
facelet 页面：
<h:selectOneRadio id="searchPlace"
value="#{yourBean.selection}" onclick="enableSearch(this)" layout="pageDirection" border="1">
<f:selectItem itemValue="0" />
在标题部分，添加javascript：
function enableSearch(radio){
if (radio.id == 's1'){
document.getElementById('startDateText').disabled=false;
document.getElementById('endDateText').disabled=false;
}else{
document.getElementById('monthSelect').disabled=false;
document.getElementById('yearSelect').disabled=false;
}
}
在 YourBean.java 类中：
Boolean selection;
public void setSelection(Boolean selection){
this.selection = selection;
}
public String getSelection(){
return this.selection;
}
public void savePage(){
....
if (selection)
..
}
在savePage() 中使用selection 参数来决定搜索类型。
【讨论】：