您的位置:首页 > 其它

Table 组件使用指南:增加Column Footer Sum

2013-03-01 14:13 471 查看
运行环境:JDeveloper 11.1.2.2.0 + Oracle Database 10g Express Edition 10.2.0.1。

当Table中有些列需要求和时,我们希望在Table的最下面显示求和项,如下图:





重点步骤说明:

1. 为要求和的列增加footer facet

右键点击列,然后选择Facet-Column->footer





2. 在footer facet中间增加OutputText

其中的OutputText的Value是绑定到一个Managed Bean的属性上的。

最终完成的列字段代码如下:

<af:column sortProperty="#{bindings.JobsView1.hints.MinSalary.name}" sortable="false"
headerText="#{bindings.JobsView1.hints.MinSalary.label}" id="c3" align="right">
<af:outputText value="#{row.MinSalary}" id="ot3">
<af:convertNumber groupingUsed="false" pattern="#{bindings.JobsView1.hints.MinSalary.format}"/>
</af:outputText>
<f:facet name="footer">
<af:panelGroupLayout id="pgl1" layout="horizontal" halign="right">
<af:outputText value="#{myBackingBean.minSalarySum}" id="ot5"/>
</af:panelGroupLayout>
</f:facet>
</af:column>


3. 完整的Managed Bean代码如下:

package view;

import oracle.adf.view.rich.component.rich.data.RichTable;

import oracle.jbo.Row;
import oracle.jbo.uicli.binding.JUCtrlHierNodeBinding;

public class MyBackingBean {
private RichTable jobTable;
private Integer minSalarySum;
private Integer maxSalarySum;

public MyBackingBean() {
}

public void setJobTable(RichTable jobTable) {
this.jobTable = jobTable;
}

public RichTable getJobTable() {
return jobTable;
}

public void setMinSalarySum(Integer minSalarySum) {
this.minSalarySum = minSalarySum;
}

public Integer getMinSalarySum() {
return calculateColumnSum("MinSalary");
}

public void setMaxSalarySum(Integer maxSalarySum) {
this.maxSalarySum = maxSalarySum;
}

public Integer getMaxSalarySum() {
return calculateColumnSum("MaxSalary");
}

public Integer calculateColumnSum(String columnName) {
Integer result = 0;
RichTable rt = this.getJobTable();
for (int i = 0; i < rt.getRowCount(); i++) {
JUCtrlHierNodeBinding rowData = (JUCtrlHierNodeBinding)rt.getRowData(i);
Row row = rowData.getRow();
result += (Integer)(row.getAttribute(columnName));
}
return result;
}
}


其中方法calculateColumnSum循环累加Table中求和列字段。

4. 根据数值大小设置Cell的背景色

在MaxSalary Column上增加inlineStyle属性如下:

inlineStyle="#{row.MaxSalary >= 20000 ? 'background-color:red;' : (row.MaxSalary >= 10000 ? 'background-color:orange;' : 'background-color:green;')}"。

运行效果如下:





5. 让列头内容显示在中间,而数据靠右排列

在MinSalary Column上增加align和inlineStyle属性如下:align="center" inlineStyle="text-align:right;"

在MaxSalary Column上增加align和inlineStyle属性如下:align="center" inlineStyle="text-align:right;#{row.MaxSalary >= 20000 ? 'background-color:red;'
: (row.MaxSalary >= 10000 ? 'background-color:orange;' : 'background-color:green;')}"

显示效果如下:



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: