这两者我们项目都有使用,下面进行一下比较。
前者
优点:使用比较灵活,可以应用到任何标签中,有两种使用方法。
1)
<ui:repeat>
<li>
....
</li>
<span />
</ui:repeat>
2)
<li jsfc=”’ui:repeat”>
...
</li>
两种使用方法的比较后者只能遍历出<li>标签,而前者还可以同时遍历出<span> 标签。
缺点:提供可使用的属性较少,对于些复杂的要求,实现有些困难,如我们常见隔行变色的实现。还有它的版本基本停滞,没有持续的更新,网上社区支持较少,资料不多。
后者
优点:提供可使用的属性较多,对于些较复杂的要求,只能对属性有了解就可以很轻松的实现。版本在不断升级,社区支持较多。
例:对于这段代码的输出
这段代码加红色标记的部分有一个rowspan=”2”,如果用前者做的话很难实现,但后者只需要这样
看到这段代码部分的红色部分 groupBy="true" ,这样就可以了,还要多说一句,使用这个属性的时候,遍历的list的size 不能为0,否则会报错,还是有这个属性的还有默认的输出样式,style=”vertical-align:top”,如果不想用这个样式话,我的解决方案是用js 来修改。
缺点:使用不是很灵话,对于一些复杂表格,实现起来有困难,另外对其众多属性的了解也有一定的难度。
总结:从上面的比较中可以看出,两者使用上各有优缺点,从比较上看两者正可以优势互补,在使用时可以根据实际情况选择使用。
前者
优点:使用比较灵活,可以应用到任何标签中,有两种使用方法。
1)
<ui:repeat>
<li>
....
</li>
<span />
</ui:repeat>
2)
<li jsfc=”’ui:repeat”>
...
</li>
两种使用方法的比较后者只能遍历出<li>标签,而前者还可以同时遍历出<span> 标签。
缺点:提供可使用的属性较少,对于些复杂的要求,实现有些困难,如我们常见隔行变色的实现。还有它的版本基本停滞,没有持续的更新,网上社区支持较少,资料不多。
后者
优点:提供可使用的属性较多,对于些较复杂的要求,只能对属性有了解就可以很轻松的实现。版本在不断升级,社区支持较多。
例:对于这段代码的输出
<
table
cellpadding
="0"
cellspacing
="1"
class
="listtem"
>
< thead >
< tr >
< th > 产品名称 </ th >
< th > 单价 </ th >
< th > 数量 </ th >
< th > 小计 </ th >
< th > 合计 </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >aabb </ td >
< td > 2008 </ td >
< td > 1 </ td >
< td > 2008 </ td >
< td rowspan ="2" style ="text-align: center;" > 8008 </ td >
</ tr >
< tr >
< td >bbcc </td>
<td>3000</td>
<td>2</td>
<td>6000</td>
</tr>
</tbody>
</table>
< thead >
< tr >
< th > 产品名称 </ th >
< th > 单价 </ th >
< th > 数量 </ th >
< th > 小计 </ th >
< th > 合计 </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >aabb </ td >
< td > 2008 </ td >
< td > 1 </ td >
< td > 2008 </ td >
< td rowspan ="2" style ="text-align: center;" > 8008 </ td >
</ tr >
< tr >
< td >bbcc </td>
<td>3000</td>
<td>2</td>
<td>6000</td>
</tr>
</tbody>
</table>
这段代码加红色标记的部分有一个rowspan=”2”,如果用前者做的话很难实现,但后者只需要这样
<
t:dataTable value
=
"
#{orderPage.order.detailList}
"
var = " product "
cellpadding = " 0 "
cellspacing = " 1 "
styleClass = " listtem "
id = " detailTable " >
< t:column >
< f:facet name = " header " >
< h:outputText value = " 产品名称 " />
</ f:facet >
< h:outputText value = " #{product.productName} " />
</ t:column >
< t:column >
< f:facet name = " header " >
< h:outputText value = " 单价(元) " />
</ f:facet >
< h:outputText value = " #{product.price} " />
</ t:column >
< t:column >
< f:facet name = " header " >
< h:outputText value = " 数量 " />
</ f:facet >
< h:outputText value = " #{product.number} " />
</ t:column >
< t:column >
< f:facet name = " header " >
< h:outputText value = " 小计 " />
</ f:facet >
< h:outputText value = " #{product.price*product.number} " />
</ t:column >
< t:column style = " text-align: center; "
groupBy = " true " >
< f:facet name = " header " >
< h:outputText value = " 合计(元) " />
</ f:facet >
< h:outputText value = " #{orderPage.order.orderCharge} " />
</ t:column >
</ t:dataTable >
var = " product "
cellpadding = " 0 "
cellspacing = " 1 "
styleClass = " listtem "
id = " detailTable " >
< t:column >
< f:facet name = " header " >
< h:outputText value = " 产品名称 " />
</ f:facet >
< h:outputText value = " #{product.productName} " />
</ t:column >
< t:column >
< f:facet name = " header " >
< h:outputText value = " 单价(元) " />
</ f:facet >
< h:outputText value = " #{product.price} " />
</ t:column >
< t:column >
< f:facet name = " header " >
< h:outputText value = " 数量 " />
</ f:facet >
< h:outputText value = " #{product.number} " />
</ t:column >
< t:column >
< f:facet name = " header " >
< h:outputText value = " 小计 " />
</ f:facet >
< h:outputText value = " #{product.price*product.number} " />
</ t:column >
< t:column style = " text-align: center; "
groupBy = " true " >
< f:facet name = " header " >
< h:outputText value = " 合计(元) " />
</ f:facet >
< h:outputText value = " #{orderPage.order.orderCharge} " />
</ t:column >
</ t:dataTable >
看到这段代码部分的红色部分 groupBy="true" ,这样就可以了,还要多说一句,使用这个属性的时候,遍历的list的size 不能为0,否则会报错,还是有这个属性的还有默认的输出样式,style=”vertical-align:top”,如果不想用这个样式话,我的解决方案是用js 来修改。
缺点:使用不是很灵话,对于一些复杂表格,实现起来有困难,另外对其众多属性的了解也有一定的难度。
总结:从上面的比较中可以看出,两者使用上各有优缺点,从比较上看两者正可以优势互补,在使用时可以根据实际情况选择使用。