`

JSF中制作双表尾

    博客分类:
  • JSF
阅读更多

最近,在项目中遇到一个制作表尾的问题,效果 如下:

 

 

使用的环境是IBM JSF。

  大家都知道,JSF在制作表格方面,能力是有欠缺的,尤其是在制作这种表头和表尾上,更是能力欠佳,现在好了,出来了一个表尾中有两行的问题,晕死了!

   不过,老板的意思是不可违背的,在经过不懈努力后,终于用JavaScript搞定了这个问题(直接就JavaScript开发好了,干嘛用JSF!sigh~)

  就是在表尾,使用这段代码,动态向表格中插入一行:

					var tDist;
					var tAmt;
					tDist='<h:outputText value="#{pc_JourneyDetail.totalDistance}"/>';
					tAmt='<h:outputText value="#{pc_JourneyDetail.totalAmount}"/>';

					if(true){
						var tbody=document.getElementById('_id8:tableEx1').tBodies[0];
						var tr=document.createElement('tr');

						//total
						var total=document.createElement('td');
						total.colSpan=4;
						total.className='SummaryFoot';
						var boldTxt=document.createTextNode('Total');
						total.appendChild(boldTxt);						
						tr.appendChild(total);
						
						//distance
						var dist=document.createElement('td');
						dist.className='SummaryFoot';
						var distTxt=document.createTextNode('27.2');
						dist.appendChild(distTxt);
						tr.appendChild(dist);						
						//amount
						var amt=document.createElement('td');
						amt.className='SummaryFoot';
						var amtTxt=document.createTextNode('40.68');
						amt.appendChild(amtTxt);
						tr.appendChild(amt);	
						//emptyTd
						var emptCell=document.createElement('td');
						emptCell.className='SummaryFoot';
						tr.appendChild(emptCell);
																		
						tbody.appendChild(tr);							
						
					}else{
				    	var summary='<tr ><td class="SummaryFoot" colspan="4"><b>Total</b></td><td class="SummaryFoot">'
							+<h:outputText value="#{pc_JourneyDetail.totalDistance}"/>
							+'</td><td class="SummaryFoot">'
							+<h:outputText value="#{pc_JourneyDetail.totalAmount}"/>
							+'</td><td class="SummaryFoot"></td></tr>';
						var tfootPreContent=document.getElementById('_id8:tableEx1').tFoot.innerHTML;					
						document.getElementById('_id8:tableEx1').tFoot.innerHTML=summary+tfootPreContent;
					}

 这一页的完整代码,涉及到license问题,这里就不发了。

 

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    JSF中文教程jsf

    在JSF中,**组件** 是UI的基础元素,如按钮、文本输入框等。这些组件可以通过XML(Facelets)或JSP页面进行声明,并且可以组合成更复杂的视图结构。**Facelets** 是JSF推荐的视图定义语言,它比JSP更强大,更易于...

    JSF中文教程.zip

    4. **EL(Expression Language)**:EL是JSF中用于访问JavaBean属性的简洁表达式语法,它可以方便地在视图层与模型层之间传递数据。 5. **Managed Beans**:Managed Beans是JSF中的核心业务对象,它们存储和处理...

    精通JSF中文教程精通JSF中文教程

    Managed Beans是JSF中的核心概念,它们作为业务逻辑的载体,可以被JSF框架自动管理。开发者可以定义属性和方法,实现后端逻辑,并通过EL(Expression Language)在视图层与之交互。 **5. EL表达式** EL是一种简洁的...

    jsf中文使用教程jsf中文使用教程

    2. **Managed Bean**:Managed Bean是JSF中的核心组件,用来存储和处理数据。 3. **Navigation Handler**:负责处理页面间的跳转。 4. **Converter和Validator**:Converter转换数据类型,Validator验证用户输入。 ...

    JSF中文教程+JSF参数传递方式

    5. **视图和会话范围的Bean**:JSF中的Managed Bean可以在不同的作用域中存在,如请求、会话、应用和视图。视图和会话范围的Bean特别适用于存储那些需要跨多个请求或页面保持的参数。 6. **导航案例**:JSF的导航...

    JSF中文问题解决方法完整版

    在IT行业中,JavaScript框架(JSF,JavaServer Faces)是一种广泛应用的用于构建Web应用程序的UI层技术。这篇博文“JSF中文问题解决方法完整版”提供了关于如何处理JSF框架在处理中文字符时可能出现的问题的解决方案...

    jsf 中文帮助文档

    **转换和验证** 是JSF中的重要部分,允许开发者定义数据输入的规则,确保用户提交的数据符合预期格式和约束。JSF提供了一系列内置的验证器,同时也支持自定义验证器。 **导航系统** 控制着用户操作后的页面跳转,...

    JSF与hibernate整合的登陆

    3. **EL表达式**:JSF的Expression Language(EL)用于在视图层和模型层之间传递数据,比如在JSF组件中绑定Managed Bean的属性,如`value="#{loginBean.username}"`。 4. **Hibernate配置**:集成Hibernate时,需要...

    JSF帮助文档

    在JSF中,应用程序被构建为一组可重用的UI组件,这些组件可以像HTML元素一样组合在一起,但提供了更丰富的功能和更强大的数据绑定能力。JSF生命周期包括六个主要阶段:恢复视图、应用请求值、处理验证、更新模型值、...

    JSF入门(中文pdf)

    在JSF中,UI组件(View)可以直接映射到后端的数据源(Model),并可以通过事件处理(Controller)进行交互。这使得开发者可以更专注于业务逻辑,而无需过多关注底层的HTTP通信细节。 首先,JSF的组件库是其一大...

    JSF中使用BooleanCheckbox实现全选功能

    这篇博客文章“JSF中使用BooleanCheckbox实现全选功能”可能详细讲解了如何利用这种组件在用户界面中创建一个可以勾选的复选框,以便一次性选择或取消选择多个条目。下面我们将深入探讨JSF中的BooleanCheckbox及其在...

    教程与手册(Dhtml手册、 JSF中文教程)

    总的来说,这个压缩包中的资料为学习和掌握Java Web开发,特别是DHTML、JSF和Struts2框架提供了全面的学习资源。通过深入阅读和实践这些教程和手册,开发者可以提升自己的技术水平,更好地应对复杂的Web开发挑战。

    ajax4jsf中文用户指南

    **Ajax请求的发送**:在JSF页面中,你可以使用Ajax4JSF提供的组件,如`a4j:support`或`a4j:commandButton`,来触发Ajax请求。这些组件可以绑定到特定的事件,当事件发生时,会向服务器发送异步请求。 **决定发送...

    JSF基础教程 简体中文

    JSF 使用 Bean 来达到逻辑层与表现层分离的目的,Bean 的管理集中在组态档案中,您只要修改组态档案,就可以修改 Bean 之间的相依关系。 o Backing Beans o Beans 的组态与设定 o Beans 上的 List, Map 数据转换与...

    jsf实例jsf实例 JSF学习 JSF jar包 JSF

    jsf实例 JSF学习 JSF jar包 JSF jsf实例 JSF学习 JSF jar包 JSFjsf实例 JSF学习 JSF jar包 JSF jsf实例 JSF学习 JSF jar包 JSF

    jsf第一个例子 jsf架包 jsf实例

    4. **Managed Beans**:在JSF中,Managed Beans是Java对象,用于存储数据和实现业务逻辑。它们与JSF页面通过EL(Expression Language)进行交互。 5. **EL(Expression Language)**:EL是用于获取和设置Managed ...

    JSF全套(JSF入门教+ LIB+ Ajax4JSF使用手册 )

    此外,自定义标签也是JSF中的一大特色,它允许开发者扩展和封装功能。 3. **JSF的LIB**:JSF的核心库包含了许多内置的组件和实用程序,这些库在JSF应用中是必不可少的。学习这部分,你需要了解如何导入和使用JSF的...

    JSF Java Server Faces (JSF)框架

    在未来的发展中,有可能所有的J2EE应用服务器都需要支持JSF。 Java Server Faces技术好处  引入了基于组件和事件驱动的开发模式,使开发人员可以使用类似于处理传统界面的方式来开发Web应用程序。提供了行为与...

    jsf分页 jsf分页 jsf分页

    下面我们将深入探讨JSF中的分页实现。 首先,我们需要理解JSF的核心组件和分页相关的API。JSF是一个MVC(模型-视图-控制器)框架,其中UIComponent和ManagedBean是关键组成部分。分页通常涉及到两个主要部分:前端...

Global site tag (gtag.js) - Google Analytics