a4j动态绘制表格

  有一个页面，上下个有一个table，上面table中的每一行由一个“查看”链接，下方的table初始隐藏。点击“查看”，下方表格中的内容，根据该链接传给后台参数的不同动态改变。因为在同一个页面动态改变一部分显示，首先想到用ajax。根据上次的经验，还是用richfaces的a4j。

     因为链接在第一个table中，而要改变的第二个table，所以用 <a4j:region> </a4j:region>将这两个table包含起来。然后在第一个table中加入链接列：

<a4j:region>
  <t:dataTable value="#{ServicePermissionManage.allRelObjects}" 
          var="eltype"
          cellpadding="0"
          cellspacing="1" styleClass="listtable">

   <h:column>
      <f:facet name="header"><h:outputText value="查看版本" ></h:outputText></f:facet>
      <a4j:commandLink reRender="templatedata" action="#{ServicePermissionManage.templateLook}" oncomplete="changestyle();"> 
            <a4j:actionparam value="#{eltype.typeid}" name="typeid" assignTo="#{ServicePermissionManage.typeid}" />
            <h:graphicImage value="../images/el/dian_an2.jpg" style="border:0px;"></h:graphicImage>
      </a4j:commandLink>

   </h:column> 

  ...   ...

 </t:dataTable>

其reRender属性即为第二个table的id，action中的方法templateLook主要是得到第二个table的value对应的List；<a4j:actionparam>主要是向templateLook方法传递参数，根据typeid得到该type对应的信息。以下是第二个table对应的部分代码：

<t:dataTable   id="templatedata" value="#{ServicePermissionManage. templatedata}"              
                    var="template" cellpadding="0" cellspacing="1" style="display:none"  styleClass="listtable">
     <h:column>
         <f:facet name="header"><h:outputText value="版本号"/></f:facet>
         <h:outputText value='#{template.version}'></h:outputText>
     </h:column>

     ...   ...

  </t:dataTable>
</a4j:region>

该table对应的list即为后台bean中的templatedata，即ArrayList<Template> templatedata = new ArrayList<Template>();，而templateLook方法根据传递的typeid查库，得到对应的List并赋值给 templatedata， 这样第二个table就动态生成了。挺有意思吧~~

最后说一点，一开始在a4j:commandLink 中使用onclick事件调用js，但第二个表格一闪就没有了，后来改成用oncomplete调用就没问题了。附上changestyle()的代码，就是改变其显示与隐藏。

<script type="text/javascript">
function changestyle(){
 var templateTable = document.getElementById('curObjForm:templatedata');
 editionTable.style.display= "";
}
</script>