Question

我正在尝试搜索表单，具体取决于您可以按开始结束或月份和年份搜索的所选项目

使用Facelets可以使用这样的表单吗？使用首选项SelectOneRadio

alt text http://img837.imageshack.us/img837/5357/imageoq.png

Answer 1

这是可行的。您希望在<f:ajax>内使用<h:selectOneMenu>在单选按钮的更改（单击）时重新呈现表单。您可以使用@form标识符。

然后，在input和select元素中，您希望disabled属性取决于单选按钮的选择。

由于h:selectOneRadio本身呈现HTML <table>，因此最棘手的部分可能就是将其全部展开。要将它们很好地组合在一起，您希望将内容拆分到另一个表格的单元格上，并将CSS vertical-align: top应用于包含td的{{1}}元素。

无论如何，这是一个完整的工作示例，可以帮助您入门：

h:selectOneRadio

以下是豆子的样子：

<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>

以下是如何应用CSS以使单选按钮在顶部对齐：

@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.
}

Answer 2

当然。

创建常规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参数来决定搜索类型。

SelectOneRadio问题

2 个答案: