站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Java 专题JSF中的columnClasses和rowClasses样式类

JSF中的columnClasses和rowClasses样式类

摘要: JSF中的columnClasses和rowClasses样式类

</td> </tr> <tr> <td height="35" valign="top" class="ArticleTeitle">
<table width="673" border="0"> <tr> <td width="395">作者:Adam Wan (QQ:339215),亿纬工作室eVstudio.net,转载请保留此行,谢谢。

JSF的标准HTML标签中(Standard HTML Tags)有h:panelGrid、h:dataTable,即实现HTML中的table标签功能。

h:panelGrid、h:dataTable都有两个特殊的CSS样式属性,columnClasses(列样式类)和rowClasses(行样式类),它们不单单是加载一个CSS样式,而是加载一个CSS样式类,并且循环这个样式类,从而丰富了并简化了表格的表现。

例如要做一个3行6列的表格,定义有两个样式

</td> <td width="268" align="right"> </td> </tr> </table>
.td1 { background:#cccccc; }
.td2 { background:#990000; }

那我们在写JSF的时候只需要在h:panelGrid中加入columnClasses列(或rowClasses行)属性,其中是CSS类的列表,类之间用逗号分隔。如果这些列表包含的类名要比列或行少,则重新使用CSS类,即再次循环列表中的CSS样式。 columnClasses="td1,td1,td2">



















<table border=0 cellPadding=2 cellSpacing=1 width=360> <tr> <td class=jsftd1>01</td> <td class=jsftd1>02</td> <td class=jsftd2>03</td> <td class=jsftd1>04</td> <td class=jsftd1>05</td> <td class=jsftd2>06</td></tr> <tr> <td class=jsftd1>07</td> <td class=jsftd1>08</td> <td class=jsftd2>09</td> <td class=jsftd1>10</td> <td class=jsftd1>11</td> <td class=jsftd2>12</td></tr> <tr> <td class=jsftd1>13</td> <td class=jsftd1>14</td> <td class=jsftd2>15</td> <td class=jsftd1>16</td> <td class=jsftd1>17</td> <td class=jsftd2>18</td></tr></table>

如果是用的如下rowClasses行属性 rowClasses="td1,td2">

则表格表现为 <table border=0 cellPadding=2 cellSpacing=1 width=360> <tr> <td class=jsftd1>01</td> <td class=jsftd1>02</td> <td class=jsftd1>03</td> <td class=jsftd1>04</td> <td class=jsftd1>05</td> <td class=jsftd1>06</td></tr> <tr> <td class=jsftd2>07</td> <td class=jsftd2>08</td> <td class=jsftd2>09</td> <td class=jsftd2>10</td> <td class=jsftd2>11</td> <td class=jsftd2>12</td></tr> <tr> <td class=jsftd1>13</td> <td class=jsftd1>14</td> <td class=jsftd1>15</td> <td class=jsftd1>16</td> <td class=jsftd1>17</td> <td class=jsftd1>18</td></tr></table>

当列和行两个属性都使用时,则样式服从于列样式,例如 columnClasses="td1,td1,td2" rowClasses="td1,td2">

则表格表现和单独使用columnClasses列样式相同。

</td> </tr> <tr>


↑返回目录
前一篇: JSF和Spring集成
后一篇: JSF实例学习--比萨(pizza)订购系统。