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

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

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

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

 

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

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

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

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

 

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