动态table是经常用到的功能,一般的做法是通过js在客户端实现,jsf可以让我们简单地在服务器实现同样的功能,不需要写任何js代码。效果如附件所示(可以动态增加行,编辑全部行后一起保存,当然也可以非常简单的删除行)。
tableeditError.bmp表示每行可以即时验证输入错误,而不是全部录入完成后统一提示输入错误
页面如下:其中h:dataTable和rich:dataTable两部分是相同的,只是rich:dataTable更好些
<h:form id="modalPanelid">
<h:outputText value="h:dataTable没法刷新单行,只能刷新整个table,问题是tab键功能失效" />
<h:dataTable id="itemList" value="#{ents}" var="ent">
<h:column>
<f:facet name="header">long1</f:facet>
<h:inputText value="#{ent.long1}" />
</h:column>
<h:column>
<f:facet name="header">double1</f:facet>
<s:div id="doubleDiv">
<h:inputText id="doubleid" value="#{ent.double1}">
<a:support event="onblur" reRender="doubleDiv"/>
</h:inputText>
<h:message for="doubleid"/>
</s:div>
</h:column>
<h:column>
<f:facet name="footer">
<a:commandButton action="#{tableEditAction.addOne}" value="增加" reRender="itemList"></a:commandButton>
</f:facet>
</h:column>
</h:dataTable>
<h:outputText value="rich:dataTable解决了h:dataTable的刷新问题" />
<rich:dataTable id="itemList2" value="#{ents}" var="ent" >
<rich:column>
<f:facet name="header">long1</f:facet>
<rich:inplaceInput layout="block" value="#{ent.long1}"
id="inplace" required="true" changedHoverClass="hover"
viewHoverClass="hover" viewClass="inplace"
changedClass="inplace" selectOnEdit="true" editEvent="onclick">
</rich:inplaceInput>
</rich:column>
<rich:column>
<f:facet name="header">double1</f:facet>
<s:div id="doubleDiv2">
<h:inputText id="doubleid2" value="#{ent.double1}">
<a:support event="onblur" reRender="doubleDiv2"/>
</h:inputText>
<h:message for="doubleid2"/>
</s:div>
</rich:column>
<rich:column>
<f:facet name="footer">
<a:commandButton action="#{tableEditAction.addOne}" value="增加" reRender="itemList2"></a:commandButton>
</f:facet>
</rich:column>
</rich:dataTable>
<s:div>
<h:commandButton action="#{tableEditAction.save}" value="保存"></h:commandButton>
</s:div>
</h:form>
java类
@Name("tableEditAction")
@Scope(ScopeType.CONVERSATION)
public class TableEditAction {
@Out
private List<EntImport> ents=new ArrayList<EntImport>();
public void addOne(){
EntImport ent=new EntImport();
ents.add(ent);
}
public void save(){
for(EntImport ent:ents){
System.out.println("----ent.getLong1:"+ent.getLong1());
}
}
}
要求:table的value值的scope必须大于request,一般来说是CONVERSATION的,这样增加新行时才不会丢失以前的行。