ADF中怎样创建带有小计功能的Table

本示例中包含如下内容：

• 怎样基于JavaBean代码而不是VO的方式产生Table数据
• 怎样单独改变行row显示时的样式
• 怎样创建带有小计subtotal功能的Table

   

原理介绍

小计功能不属于Table的自带功能，因此只能通过在row中添加具有特殊样式的小计行的方式实现，同时需要通过代码计算出小计的数据。

首先新建一个mBean:TableTotalBean.java，作为UI画面的专有mBean。该mBean中，包含有一个内嵌的java class:TableRow，TableRow本身对应着Table中的行，TableRow的属性与Table中的列一一对应（name、d1、d2），另外包含一个隐藏字段type。当代码执行时，Table的Value被设置为根据此List<TableRow>生成的DataModel，通过DataModel的各种实现类可以将List（RowSet、Object[]等）类型的普通JavaBean转换为Table的表格数据，Table中的数据即被显示。

行显示时，当TableRow.type="subtotal"时，Table通过页面的三元表达式为该行添加css 样式类AFTableCellSubtotal以便与其他行的样式区分开，该方法同样可以控制行的其它属性（如：align）。

 

注意，使用带有小计功能的Table时需要把Table的排序功能关闭掉，最好行列的都关掉（在本例中默认行排序是关闭的）。

 

效果预览

使用方法示例

1.       基于JavaBean代码产生Table数据

核心代码如下：

private RichTable table;//与页面上的Table绑定 ….. public String cb1_action() { DataModel dm = new ListDataModel(List< TableRow >); table.setValue(dm); …… } public class TableRow {         private String name;         private String type;         private String align;         private long d1;         private long d2; …… }

 

mBean：TableTotalBean.java代码

public class TableTotalBean {     private RichTable table;//与页面上的Table绑定     private long total1;//与合计栏位绑定     private long total2;     public List findTableData() {         List list = new ArrayList();         long subtotal1 = 0; //此处数值运算只用于演示,为使代码清晰全部使用long型变量         long subtotal2 = 0;         this.total1 = 0;         this.total2 = 0;         for (int i = 0; i < 12; i++) {             //             long d1 = Math.round(100 * Math.random());             long d2 = Math.round(100 * Math.random());             //             if (i == 3 || i == 8) {                 list.add(new TableRow("小计", "subtotal", subtotal1, subtotal2, ""));                 subtotal1 = 0;                 subtotal2 = 0;             } else {                 list.add(new TableRow("n" + i, "", d1, d2, ""));                 subtotal1 += d1;                 subtotal2 += d2;                 this.total1 += d1;                 this.total2 += d2;             }         }         return list;     }    public String cb1_action() {         DataModel dm = new ListDataModel(findTableData());         table.setValue(dm);         return null;     }      public class TableRow {//代表Table中的行         private String name;         private String type;         private String align;         private long d1;         private long d2;           public TableRow(String name, String type, long d1, long d2, String align) {             this.name = name;             this.type = type;             this.d1 = d1;             this.d2 = d2;             this.align = align;         }     } }

页面设置

页面设置

1.       怎样单独改变行row显示时的样式

<af:column sortable="false" align="#{row.type=='subtotal'?'right':''}" headerText="name" id="c4"                        width="78" styleClass="#{row.type=='subtotal'?'AFTableCellSubtotal':''}">     <af:outputText value="#{row.name}" id="ot3"/> </af:column>

通过三元表达式（代码中的红色部分）动态改变行的样式，这种方式只会改变本行样式不会影响其他行。

 

2.       从组件面板中拖拽ADF Table到页面上，生成af:table，并把Table绑定到mBean的table属性上。

3.       在Table下添加三列，设置如下

*第一个列是作为rowHeader使用的，可进行行选择

1.       将d1、d2两个数字类型的字段的列的align属性设为right

2.       将所有column的styleClass属性设为#{row.type=='subtotal'?'AFTableCellSubtotal':''}，这里row对应着Table.var

3.       将第一列的align属性设为#{row.type=='subtotal'?'right':''}

4.       将Table.rowSelection设为single

5.       将Table.emptyText设为“请点击查询”

6.       为了美观，在table外添加一个panelCollection及触发按钮，设置如下

1. 
   

7. 按钮绑定到mBean的cb1_action方法

8.       为现实总计功能，在d1、d2的footer面板下添加两个inputText,并将其value绑定到mBean的total1,total2属性上

如果想要将数字显示为钱的话，则在inputText下面加个

属性设置如下

 完成，运行画面查看效果

页面代码

<?xml version='1.0' encoding='UTF-8'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"           xmlns:f="http://java.sun.com/jsf/core"           xmlns:h="http://java.sun.com/jsf/html"           xmlns:af="http://xmlns.oracle.com/adf/faces/rich">   <jsp:directive.page contentType="text/html;charset=UTF-8"/>   <f:view>     <af:document id="d1">       <af:form id="f1">         <af:panelCollection id="pc1">           <f:facet name="menus"/>           <f:facet name="toolbar">             <af:toolbar id="t2">               <af:commandButton text="查询" id="cb1"                                 action="#{TableTotalBean.cb1_action}"/>             </af:toolbar>           </f:facet>           <f:facet name="statusbar"/>           <af:table var="row" rowBandingInterval="0" id="t1"                     binding="#{TableTotalBean.table}" varStatus="vs"                     rowSelection="single" emptyText="请点击查询">             <af:column id="c1" rowHeader="true" width="35" styleClass="#{row.type=='subtotal'?'AFTableCellSubtotal':''}">               <f:facet name="footer">                 <f:verbatim>                   总计                 </f:verbatim>               </f:facet>             </af:column>             <af:column sortable="false" align="#{row.type=='subtotal'?'right':''}" headerText="name" id="c4"                        width="78" styleClass="#{row.type=='subtotal'?'AFTableCellSubtotal':''}">               <af:outputText value="#{row.name}" id="ot3"/>             </af:column>             <af:column sortable="false" headerText="d1" id="column2"                        width="237" styleClass="#{row.type=='subtotal'?'AFTableCellSubtotal':''}"                        align="right">               <af:outputText value="#{row.d1}" id="outputText2">                 <f:convertNumber currencySymbol="$" type="currency"                                  maxFractionDigits="2"/>               </af:outputText>               <f:facet name="footer">                 <af:inputText id="it1" readOnly="true"                               value="#{TableTotalBean.total1}" rendered="true">                   <f:convertNumber currencySymbol="$" type="currency"                                    maxFractionDigits="2"/>                 </af:inputText>               </f:facet>               <f:facet name="filter"/>               <f:facet name="header"/>             </af:column>             <af:column sortable="false" headerText="d2" id="column1"                        width="155" styleClass="#{row.type=='subtotal'?'AFTableCellSubtotal':''}"                        align="right">               <af:outputText value="#{row.d2}" id="outputText1"/>               <f:facet name="footer">                 <af:inputText id="inputText1" readOnly="true"                               value="#{TableTotalBean.total2}"/>               </f:facet>             </af:column>           </af:table>         </af:panelCollection>       </af:form>     </af:document>   </f:view>   <!--oracle-jdev-comment:preferred-managed-bean-name:TableTotalBean--> </jsp:root>