ui:repeat 与t:dateTable或t:dateList 使用比较 .
来源:互联网 发布:红中计划软件客户端 编辑:程序博客网 时间:2024/05/05 14:45
这两者我们项目都有使用,下面进行一下比较。
前者
优点:使用比较灵活,可以应用到任何标签中,有两种使用方法。
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 来修改。
缺点:使用不是很灵话,对于一些复杂表格,实现起来有困难,另外对其众多属性的了解也有一定的难度。
总结:从上面的比较中可以看出,两者使用上各有优缺点,从比较上看两者正可以优势互补,在使用时可以根据实际情况选择使用。
- ui:repeat 与t:dateTable或t:dateList 使用比较 .
- Don't Repeat Yourself
- Don’t Repeat Yourself
- const T 与T const的比较
- Don’t repeat the DAO!
- Don’t repeat the DAO!
- DRY,DON'T REPEAT YOURSELF!
- DRY(Don't repeat yourself)
- Func<T,T> 委托 与 lambda 使用
- const T 与T const的比较(const T vs.T const的翻译 Dan Saks)
- Nullable<T> 与 T?
- \t\t分布式文件系统比较
- 编程法则 - DRY(Don't Repeat Yourself)
- Don't Repeat YourSelf (DRY)
- AT&T 与Intel 汇编语法比较
- AT&T与Intel汇编语言的比较
- AT&T与Intel汇编语言的比较
- AT&T与Intel汇编语言的比较
- android学习笔记(十) android 使用 google Map
- 让li 横排显示的CSS代码
- WPF自定义样式中的TRIGGER一种用法
- 台钓掉底(调标)
- GetMessage以及消息循环说明
- ui:repeat 与t:dateTable或t:dateList 使用比较 .
- 自定义组建面板
- ObjectDataSource用法说明
- Freefloat FTP Server (CWD command) Buffer Overflow Exploit
- 在android中使用Pull解析器生成xml文件
- Jxls 导出excel
- seam 学习总结 1:seam 初体验。
- 收集各种笑话
- Dev系列控件之XtraCharts(一)