用jscript处理repeater生成的表格, 实现分页打印

在项目中,为省事采用JS遍历DOM将录入数据界面转换为可打印界面,无需额外做打印页面。非列表式表单替换不适合打印的HTML控件即可,列表式表单需解决分页问题,通过在HTML元素加自定义属性提供额外信息,在JS里定义类处理元素替换和分页逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我现在做的项目的录入数据的界面基本上和原来纸面上表单的外观相同. 而这些表单也同时需要被打印出来,  为了省事, 想出了用js遍历DOM进行转换的方法, 如此一来就不需要另外做一个用于打印的页面了. 非列表式的表单比较好办, 只要把一些不适合打印出来的html控件(例如<input>,<select>)替换掉就可以了. 列表式的表单还要解决分页的问题, 会复杂一点. 但说到底还是替换一些html元素而已. 实现分页需要在html里提供一些额外的信息: 每页显示记录的行数,哪些<tr>算列表里的一行和header, footer的模板. 这些额外信息可以通过在相关html元素里加自定义的attribute实现(在这里, 在整个table加pageSize属性指定每页显示记录数: 

None.gif < TABLE  id ="Table1"  printDirection ="Horizonal"  pageSize =20   borderColor ="#000000"  cellSpacing ="0"  cellPadding ="0"   >    

是数据列的<tr>将会加上row属性作为标记: 

None.gif < asp:Repeater  ID ="repeater"  Runat ="server" >  
None.gif    
< ItemTemplate >  
None.gif        
< TR  row >  
None.gif            
< TD  style ="BORDER-RIGHT: #000000 1px solid; "   ></ TD >  
None.gif                dot.gif 

header和footer可以用<thead>和<tfoot>包含作为标记.

None.gif < thead  id ="printHeader" >   
None.gif    
< TR  vAlign ="bottom"   >   
None.gif        
< TD >   
None.gif        
</ TD >   
None.gif        
< TD  vAlign ="middle"   align ="center"   bgColor ="#ffffff"  colSpan ="17"   
None.gif                rowSpan
="2" >< B > 佛山市高级职称人才花名表 </ B >   
None.gif        
</ TD >   
None.gif        
< TD > </ TD >   
None.gif    
</ TR >  
None.gif    dot.gif 
None.gif
</ thead >  

js里定义了多个用于替换html元素的类, 处理程序默认根据元素的tagName调用相应的类的convert方法去对其进行处理. 有关分页的逻辑则可以在处理<tr>的类里完成. 当判断到被处理的<tr>是一列数据时, 一个计数器会加1, 当计数器等于pageSize时, 在<tr>前面分别加上footer, 分页符和header并把计数器清零, 如此一来就能完美的实现分页了.

demo

转载于:https://www.cnblogs.com/Yok/archive/2005/04/28/146643.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值