GXT之旅：第五章：高级Components(2)——Grid的高级应用

Grid的高级应用

之前，我们学习的都是Grid的基本功能。事实上，Grids提供了丰富的功能，下面就让我们了解一下。

HeaderGroupConfig

假设我们想比较欧洲东部在1950和2000年之间的人口数，通常的显示效果如下：

但是我们想让表格更直观的显示，如下：

这时我们就需要对GXT Grid有如下步骤的加工：

• 针对每一列，新建ColumnConfig
• 将所有的ColumnConfigs放入一个list
• 通过list生成ColumnModel

final List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
ColumnConfig column = new ColumnConfig("countryName",
"Country",100);
columns.add(column);
column = new ColumnConfig("population1950", "1950",130);
columns.add(column);
column = new ColumnConfig("population2000", "2000",130);
columns.add(column);
final ColumnModel columnModel = new ColumnModel(columns);

• 上述的代码，所呈现出的Grid如下：

• 如果希望将后面两列分组一组，我们就需要使用到HeaderGroupConfig

HeaderGroupConfig headerGroupConfig = new HeaderGroupConfig(
"Population (000's)", 1, 2);

• 第一个参数是title，第二和第三个参数分别是合并后的行数和合并后的列数。
  

• 将headerGroupConfig add在ColumnModel里。并指明行号和起始的列号

columnModel.addHeaderGroup(0, 1, headerGroupConfig););

• 执行后的效果如下：
  

AggregationRowConfig

使用AggregationRowConfig，可以创建统计行，用来针对某些列的统计数据。

SummaryType是用来设置其统计数据的算法：

• SummaryType.SUM
• SummaryType.AVG
• SummaryType.MIN
• SummaryType.MAX
• SummaryType.COUNT
  

如果我们想实现上图的效果，我们应该实现的代码如下：

• 新建AggregationRowConfig，
  

AggregationRowConfig<Statistic>> totals = new AggregationRowConfig
<Statistic>();

• 通过setHtml方法，设置该行的题头

totals.setHtml("countryName", "Total");

• 针对与要统计的列，我们需要设置其统计算法。

totals.setSummaryType("population1950", SummaryType.SUM);
totals.setSummaryType("population2000", SummaryType.SUM);

• 对于要统计的列，为了显示的需要，要设置NumberFormat（com.google.gwt.i18n.client.NumberFormat）。当然也可以通过AggregationRenderer.实现，但是不管怎样，都需要使用其中一种方法，否则，会空白显示

totals.setSummaryFormat("population1950", NumberFormat.
getDecimalFormat());
totals.setSummaryFormat("population2000", NumberFormat.
getDecimalFormat());

• 同样的，AggregationRowConfig实例需要被添加到columnModel里

columnModel.addAggregationRow(totals);