在实际项目中,发现团队有人在使用<af:table>时,为控制一个表格每一列的头部的位置理左边边框有一定距离,如20px,发现其实现使用了<f:facet name="header">的方式包含一个<af:outputText>,然后对这个<af:outputText>设置inlineStyle="padding-left:20px;" 如下图:
无用质疑,这样做法是可行的。但实际上实现这个有更好的方式。
一种方法是修改全局的皮肤的CSS文件,对<af:column>的header样式做设置,这样会影响所有的table的表头,这样的做法显然不是我们想要的。
第二种方法和第一种类型,在全局的皮肤CSS文件添加对<af:column>的header含父子关系的CSS样式,然后再具体需要修改的<af:column>设置styleClass,这种方法估计我同事也清楚,但感觉为一个局部小功能需求修改CSS文件不划算,因此没有这样做,而采取了上述添加<f:facet name="header">的做法。
事实上,针对这个功能,<af:column>有一headerClass属性可以轻松实现该功能,如下图:
为什么说在这里使用headerClass比使用<f:facet name="header">的方式好呢,很简单,这样使用UI就减少了,服务器渲染的时间变少了,而且生成的html内容还变少了。