本示例中包含如下内容:
-
怎样基于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及触发按钮,设置如下
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> |