Question

如何创建“修改”按钮，以便在点击按钮时将h:outputText更改为h:inputText？

Answer 1

使用rendered属性：

<h:outputText value="#{bean.entity.property}" rendered="#{not bean.editmode}" />
<h:inputText value="#{bean.entity.property}" rendered="#{bean.editmode}" />
...
<h:commandButton value="Edit" action="#{bean.edit}" rendered="#{not bean.editmode}" />
<h:commandButton value="Save" action="#{bean.save}" rendered="#{bean.editmode}" />

在视图范围内的bean中使用它：

private boolean editmode;

public void edit() {
    editmode = true;
}

public void save() {
    entityService.save(entity);
    editmode = false;
}

public boolean isEditmode() {
    return editmode;
}

// ...

请注意，查看作用域的bean对于此答案的第5点中提到的原因非常重要：commandButton/commandLink/ajax action/listener method not invoked or input value not updated。

或者，您可以将输入组件的disabled属性与CSS镜头结合使用，这基本上使其看起来像输出组件（通过删除边框）。

<h:inputText value="#{bean.entity.property}" disabled="#{not bean.editmode}" />
...
<h:commandButton value="Edit" action="#{bean.edit}" rendered="#{not bean.editmode}" />
<h:commandButton value="Save" action="#{bean.save}" rendered="#{bean.editmode}" />

与例如

input[disabled] {
    border: 0;
}

此外，bean必须是视图范围的。另请参阅How to choose the right bean scope?

如何在JSF中构建“编辑”按钮并在h：outputText和h：inputText之间切换

1 个答案: