使用ajax4jsf来处理JSF table

使用ajax4jsf来处理JSF table

 

下面是一个使用ajax风格的JSF table,有ajax来出来table的翻页和插入删除.

 

JSP Page Coding

 

 

<!--Data Table:-->
 

<h:dataTable id="cityList" value="#{cityBean.cities}" var="clist" rows="10" 

first="#{cityBean.offset}" border="2" width="200px" rules="all">

<h:column>

 <h:outputText value="#{clist}" />

</h:column>

</h:dataTable>

<!--AJAX-based Pagination Links-->

<h:panelGroup style="display:block">

 <a4j:commandLink value="Previous.. " action="#{cityBean.prevAction}"

reRender="cityList"></a4j:commandLink>

 <a4j:commandLink value=" Next.." action="#{cityBean.nextAction}"

reRender="cityList"></a4j:commandLink>

</h:panelGroup>

<!--AJAX-based Add/Remove Buttons-->

<h:panelGroup style="display:block">

 <a4j:commandButton value="Add Town" action="#{cityBean.addTown}"

reRender="cityList,statusmessage"></a4j:commandButton>

 <a4j:commandButton value="Delete Town" action="#{cityBean.deleteTown}"

reRender="cityList,statusmessage"></a4j:commandButton>

</h:panelGroup>

 

data bable每次将从cityBean的list中取10条数据显示. a4j:CommandLinks 中的 Next and PrevAction 来处理页面导航. Add and DeleteTown  actions来处理列出的内容.

 

Java Code

 

 

...

 public void prevAction(){

  if (getOffset() > 9){

   setOffset(getOffset() - 10);

  }

 }
 

 public void nextAction(){

  if (getOffset() < getCities().size() - 9){

   setOffset(getOffset() + 10);

  }

 }

 public void addTown() {

  if (!this.cities.contains(cityName)){

   this.cities.add(cityName);

   Collections.sort(cities);

   this.statusMessage = "The Town Succesfully Added, Table Was Sorted";

  }else{

   this.statusMessage = "This Town Is Already In Table";

  }

 }

 public void deleteTown(){

  if (cities.contains(this.cityName)){

   this.cities.remove(this.cityName);

   this.statusMessage = "The Town Succesfully Removed";

  }else{

   this.statusMessage = "Town Does Not Exist";

  }

 }

...

 

所以,你可以实现一个可以排序,更新的ajax mode的table,而不用写任何js代码.仅仅记得当调用完action时要从新渲染table就可以了.