基于jsf的批量编辑，可编辑table

动态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的，这样增加新行时才不会丢失以前的行。