a4j动态作图表格 _Web前端

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()的代码，就是改变其显示与隐藏。