Table 组件使用指南:设置宽度和高度

尽量不要用绝对值来设置ADF Table的宽度和高度,而应该利用组件的伸缩特性来达到想要的界面效果。
为了能够更好地理解这个问题,首先应该了解一下ADF Table的工作原理。
Table(包括Tree/TreeTable)组件中的符合条件的记录并不是一次从Server端全部取出,而是分批取出,然后展现在Client端。
ADF Table有三个属性与获取和显示行记录有关,它们是:RangeSize,FetchSize,AutoHeightRow。
(1)RangeSize:该值就是Iterator Binding上的属性RangeSize,二者是同一个东西,表示Iterator每次遍历获取的对象数。默认值:25。
(2)FetchSize: 表示Table组件每次从Server端获取的记录数。默认值:#{bindings.JobsView1.rangeSize},即默认和RangeSize值一样。
(3)AutoHeightRow:表示Table组件显示的行数。默认值:-1,表示不自动设置行数,适用于Table的Container可以伸缩子组件,比如panelStretchLayout。
设置为0,表示与FetchSize值一样,这是最理想的情况,每次从Server端取回多少记录就显示多少记录。
注意,AutoHeightRow的值不能大于FetchSize的值。
如果AutoHeightRow大于FetchSize,比如AutoHeightRow=50,FetchSize=25,那么在页面上显示50条记录就需要从Server端“搬运”两次。

1. 设置宽度
(1)这是默认情况下,Table的显示效果:没有横向占满整个空间,并且列宽也不合适。

(2)为Table组件增加columnStretching="multiple"设置,并设置列宽的百分比例。
最终的显示效果如下:横向占满了整个空间,并且列宽也比较合适。

注意,这里的列宽的百分比是设置在Column的width属性上的,如:width="10%",百分比作为各个列之间的比例,不一定要总和等于100%。
(3)允许/不允许用户改变Column的宽度。
在RichTable API中有一个方法setColumnResizing(String str),传入"enabled"表示允许,传入"disabled"表示不允许。
我在Table的属性没有找到这个属性,因此只能通过程序实现,比如:
public void toggleColumnResizing() {
    if (jobsTable.getColumnResizing().equals("enabled")) {
            jobsTable.setColumnResizing("disabled");
    } else {
            jobsTable.setColumnResizing("enabled");
    }
}

2. 设置高度
为了说明前后对比的效果,我这里拖放Data Control生成了三个组件:Query、Table、Form。
(1)这是最初的效果:Table没有横向占满,并且有一个水平滚动条,很难看。

(2)为Table“罩上”一个PanelCollection,水平滚动条消失,但依然没有横向占满。

(3)为PanelCollection增加属性:styleClass="AFStretchWidth",PanelCollection横向占满了,但Table依然没有横向占满。

(4)为Table组件增加columnStretching="multiple"设置,并设置列宽的百分比例。
显示效果如下:Table横向占满了整个空间,并且列宽也比较合适。
但还有一个小缺陷:记录数较少时,Table空间中的空白部分比较难看,能不能根据记录数自动伸缩Table的空间呢?

(5)为Table增加属性autoHeightRows="0",表示与FetchSize相同,我这里就是默认值25。
可以看出记录较少时,Table的空间自动收缩了。

而记录较多时,Table的空间自动扩张了。我这里全部记录是19条,一次全部显示出来了。

(6)当记录很多时,如果你想固定只显示10条记录的空间,那么可以设置autoHeightRows="10"。
可以看出记录超过10个时,右边多了一个垂直滚动条,而Table的显示空间固定为10条记录的大小。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值