用添加样式的方法为datagrid打印分页(可有页眉页脚)

     好久没写东西了!很快就要有新的项目了。前一段时间因为硬盘坏了,所有的资料都没有了,极其郁闷!现在又搜集整理了一些,还是写到这里吧。

     使打印分页的方法有很多了,因为当时客户提出的需求比较急,这种方法比较简单,所以就采用了。关于这种方法网上已经有很多资料了,我在这里只是贴出完整的步骤和关键的代码。(做的时候方法是我提出来的,具体实现是另一个同事做的,呵呵,要是他看见了,可别说我侵权呀!:))

    这种方法主要是在网页中添加样式<style>...<style>,在用ie打印的时候,会根据样式标识自动分页。所以,你只需要在表格中适当位置插入这个样式就可以了。

    1首先看看写好分页样式的html

   <html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>收文日期</title>
<style type="text/css">
  .pbreak { PAGE-BREAK-AFTER: always }
  </style>

</head>

<body>
<table cellspacing="0" cellpadding="3" rules="all" bordercolor="#6B6969" border="1" id="DG_All" style="border-color:#6B6969;font-size:9pt;width:850px;">
 <THEAD style='display:table-header-group;'><tr align="Center" valign="Middle" style="font-weight:bold;">
  <td style="width:60px;">收文日期</td><td>来文单位</td><td>来文字号</td><td style="width:40px;">类别</td><td style="width:60px;">收文编号</td><td>文件题目</td><td style="width:20px;">份数</td><td style="width:60px;">处室</td><td style="width:60px;">签收人</td><td style="width:30px;"> </td>
 </tr></THEAD><tr align="Center" valign="Middle">
  <td>2003-02-17</td><td>a</td><td>[2003]3号</td><td>市内局</td><td>[2003]5</td><td>
  aaa</td><td>1         </td><td>a室</td><td> </td><td> </td>
 </tr><tr align="Center" valign="Middle">
  <td>2003-02-17</td><td>b</td><td>[2003]3号</td><td>请示</td><td>[2003]11</td><td>
  bbb</td><td>1         </td><td>b处</td><td> </td><td>存查</td>
 </tr><tr align="Center" valign="Middle">
  <td>2003-02-14</td><td>c</td><td>第2号</td><td>请示</td><td>[2003]20</td><td>
  ccc</td><td>1         </td><td>c处</td><td> </td><td> </td>
 </tr><tr align="Center" valign="Middle" style="PAGE-BREAK-AFTER:always;">
  <td>2003-02-11</td><td>d</td><td>[2003]19号</td><td>市内局</td><td>[2003]3</td><td>
  ddd</td><td>1         </td><td>d处</td><td> </td><td> </td>
 </tr><tr align="Center" valign="Middle">
  <td>2003-02-10</td><td>e</td><td>[2003]19号</td><td>市内局</td><td>[2003]3</td><td>
  eee</td><td>1         </td><td>e处</td><td> </td><td> </td>
 </tr><tr align="Center" valign="Middle">
  <td>2003-02-17</td><td>f</td><td>[2003]3号</td><td>请示</td><td>[2003]11</td><td>
  fff</td><td>1         </td><td>f处</td><td> </td><td>存查</td>
 </tr><tr align="Center" valign="Middle">
  <td>2003-02-17</td><td>g</td><td>[2003]3号</td><td>请示</td><td>[2003]11</td><td>
  ggg</td><td>1         </td><td>g处</td><td> </td><td>存查</td>
 </tr>
 <tfoot style='display:table-footer-group;'><tr align="Center" valign="Middle" style="font-weight:bold;">
  <td colspan="10">这里可以写页码</td>
 </tr></tfoot>
</table>
</body>

</html>

把这段代码放到ie里浏览,然后点击“打印预览”,就会发现表格在d和e之间自动分页了。而且每页都有表头和表尾。这个就是我们最终想要的效果。

  2再看看asp.net中代码

    我们是把一个不分页的datagrid先显示到页面,然后点击ie的“打印预览”,会自动分页。所以要把<THEAD>。。。</THEAD>,style="PAGE-BREAK-AFTER:always;">这些样式循环插入到合适的位置(在后台实现)。

<1>强行分页

    private void DG_All_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
  {
   //强行分页
   if( e.Item.ItemIndex > 0 && (e.Item.ItemIndex + 1 ) % 15 == 0)//15行就分页
   {
    e.Item.Style.Add("PAGE-BREAK-AFTER","always");
   }
  } 

<2>插入表头表尾的标志

     ...

    DG_All.DataBind();//首先绑定datagrid

   System.IO.StringWriter tw=new System.IO.StringWriter();
   System.Web.UI.HtmlTextWriter hw=new System.Web.UI.HtmlTextWriter(tw);
   DG_All.RenderControl(hw);
   DG_All.Visible = false;

   String strRetHTML = renderDG().Replace("border-collapse:collapse;","");
   strRetHTML = strRetHTML.Insert(strRetHTML.IndexOf("<tr"),"<THEAD style='display:table-header-group;'>");
   strRetHTML = strRetHTML.Insert(strRetHTML.IndexOf("</tr>")+5,"</THEAD>");

   strRetHTML = System.Text.RegularExpressions.Regex.Replace(strRetHTML,@"<td>[/s]*</td>","<td>&nbsp;</td>");//空格位置插入“&nbsp;”,否则空白处会没格

   this.litDisplay.Text = strRetHTML;

其中litDisplay是

<asp:Literal id="litDisplay" runat="server" EnableViewState="False"></asp:Literal>

上面示例只是添加了表头,相同方法可添加表尾。

       呵呵,就这样,是不是挺简单呀?

      注意一点,datagrid中不要加style=" POSITION: absolute;"  一加上这个,从第二页开始就没有表格了。(这个实验了很久才发现这个问题!)

如题,项目要用到jeasyui,所以必须要下载它的demo,获取相应的js,css等等的文件 jeasyui的下载地址:http://www.jeasyui.com/download/index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="easyui/themes/icon.css" rel="stylesheet" type="text/css" /> <link href="easyui/demo.css" rel="stylesheet" type="text/css" /> <script src="easyui/jquery.min.js" type="text/javascript"></script> <script src="easyui/jquery.easyui.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#tab").datagrid({ // width: 600, //宽度 height: 400, //高度 singleSelect: true, //选中一行的设置 fitColumns:true, url: "EditorUserHandler.ashx", //请求路径 title: "用户信息", //标题 iconCls: "icon-add", //图标 // collapsible: true, //隐藏按钮 //冻结列 // frozenColumns: [[{ field: "chk", "checkbox": true}]], //复选框 //列 rownumbers: false, //传输参数 queryParams: { "action": "query" }, pagination: true, toolbar: "#tool" }); $("#tab").datagrid('getPager').pagination({ beforePageText: "第", afterPageText: "页", displayMsg: "当前 {from} - {to}条数据 共{total} 条数据", pageSize: 10, pageList: [5, 10, 15, 20, 30] }); }) </script> <!--//打印--> <script type="text/javascript"> function CreateFormPage(strPrintName, printDatagrid) { var tableString = '<div><table width="100%"><tr style="text-align:center;"><td colspan="2" style="font-size:24px; font-weight:bold;"><span style="text-decoration:underline;"> </span>年<span style="text-decoration:underline;"> </span>半年广东省房屋市政工程安全生产文明施工示范工地申报项目汇总表</td></tr><tr><td style="text-align:left;">地区(部门)公 章: </td><td style="text-align:right;">报送时间: 年 月 日</td></tr></table> <table cellspacing="0" class="pb">'; var frozenColumns = printDatagrid.datagrid("options").frozenColumns; // 得到frozenColumns对象 var columns = printDatagrid.datagrid("options").columns; // 得到columns对象 var nameList = ''; // 载入title if (typeof columns != 'undefined' && columns != '') { $(columns).each(function (index) { tableString += '\n<tr>'; if (typeof frozenColumns != 'undefined' && typeof frozenColumns[index] != 'undefined') { for (var i = 0; i < frozenColumns[index].length; ++i) { if (!frozenColumns[index][i].hidden) { tableString += '\n<th width="' + frozenColumns[index][i].width + '"'; if (typeof frozenColumns[index][i].rowspan != 'undefined' && frozenColumns[index][i].rowspan > 1) { tableString += ' rowspan="' + frozenColumns[index][i].rowspan + '"'; } if (typeof frozenColumns[index][i].colspan != 'undefined' && frozenColumns[index][i].colspan > 1) { tableString += ' colspan="' + frozenColumns[index][i].colspan + '"'; } if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') { nameList += ',{"f":"' + frozenColumns[index][i].field + '", "a":"' + frozenColumns[index][i].align + '"}'; } tableString += '>' + frozenColumns[0][i].title + '</th>'; } } } for (var i = 0; i < columns[index].length; ++i) { if (!columns[index][i].hidden) { tableString += '\n<th width="' + columns[index][i].width + '"'; if (typeof columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) { tableString += ' rowspan="' + columns[index][i].rowspan + '"'; } if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) { tableString += ' colspan="' + columns[index][i].colspan + '"'; } if (typeof columns[index][i].field != 'undefined' && columns[index][i].field != '') { nameList += ',{"f":"' + columns[index][i].field + '", "a":"' + columns[index][i].align + '"}'; } tableString += '>' + columns[index][i].title + '</th>'; } } tableString += '\n</tr>'; }); } // 载入内容 var rows = printDatagrid.datagrid("getRows"); // 这段代码是获取当前页的所有行 var nl = eval('([' + nameList.substring(1) + '])'); for (var i = 0; i < rows.length; ++i) { tableString += '\n<tr>'; $(nl).each(function (j) { var e = nl[j].f.lastIndexOf('_0'); tableString += '\n<td'; if (nl[j].a != 'undefined' && nl[j].a != '') { tableString += ' style="text-align:' + nl[j].a + ';"'; } tableString += '>'; if (e + 2 == nl[j].f.length) { tableString += rows[i][nl[j].f.substring(0, e)]; } else tableString += rows[i][nl[j].f]; tableString += '</td>'; }); tableString += '\n</tr>'; } tableString += '\n</table></div>'; window.showModalDialog("/print.htm", tableString, "location:No;status:No;help:No;dialogWidth:800px;dialogHeight:600px;scroll:auto;"); } </script> <!--//导出--> <script type="text/javascript"> function ChangeToTable(printDatagrid) { var tableString = '<table cellspacing="0" class="pb">'; var frozenColumns = printDatagrid.datagrid("options").frozenColumns; // 得到frozenColumns对象 var columns = printDatagrid.datagrid("options").columns; // 得到columns对象 var nameList = new Array(); // 载入title if (typeof columns != 'undefined' && columns != '') { $(columns).each(function (index) { tableString += '\n<tr>'; if (typeof frozenColumns != 'undefined' && typeof frozenColumns[index] != 'undefined') { for (var i = 0; i < frozenColumns[index].length; ++i) { if (!frozenColumns[index][i].hidden) { tableString += '\n<th width="' + frozenColumns[index][i].width + '"'; if (typeof frozenColumns[index][i].rowspan != 'undefined' && frozenColumns[index][i].rowspan > 1) { tableString += ' rowspan="' + frozenColumns[index][i].rowspan + '"'; } if (typeof frozenColumns[index][i].colspan != 'undefined' && frozenColumns[index][i].colspan > 1) { tableString += ' colspan="' + frozenColumns[index][i].colspan + '"'; } if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') { nameList.push(frozenColumns[index][i]); } tableString += '>' + frozenColumns[0][i].title + '</th>'; } } } for (var i = 0; i < columns[index].length; ++i) { if (!columns[index][i].hidden) { tableString += '\n<th width="' + columns[index][i].width + '"'; if (typeof columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) { tableString += ' rowspan="' + columns[index][i].rowspan + '"'; } if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) { tableString += ' colspan="' + columns[index][i].colspan + '"'; } if (typeof columns[index][i].field != 'undefined' && columns[index][i].field != '') { nameList.push(columns[index][i]); } tableString += '>' + columns[index][i].title + '</th>'; } } tableString += '\n</tr>'; }); } // 载入内容 var rows = printDatagrid.datagrid("getRows"); // 这段代码是获取当前页的所有行 for (var i = 0; i < rows.length; ++i) { tableString += '\n<tr>'; for (var j = 0; j < nameList.length; ++j) { var e = nameList[j].field.lastIndexOf('_0'); tableString += '\n<td'; if (nameList[j].align != 'undefined' && nameList[j].align != '') { tableString += ' style="text-align:' + nameList[j].align + ';"'; } tableString += '>'; if (e + 2 == nameList[j].field.length) { tableString += rows[i][nameList[j].field.substring(0, e)]; } else tableString += rows[i][nameList[j].field]; tableString += '</td>'; } tableString += '\n</tr>'; } tableString += '\n</table>'; return tableString; } function Export(strXlsName, exportGrid) { var f = $('<form action="export.aspx" method="post" id="fm1"></form>'); var i = $('<input type="hidden" id="txtContent" name="txtContent" />'); var l = $('<input type="hidden" id="txtName" name="txtName" />'); i.val(ChangeToTable(exportGrid)); i.appendTo(f); l.val(strXlsName); l.appendTo(f); f.appendTo(document.body).submit(); try { document.body.removeChild(f); } catch (e) { } } </script> </head> <body> <a href="javascript:void(0);" onclick="CreateFormPage('打印测试', $('#tab'));">打印</a> <a href="javascript:void(0);" onclick="Export('导出excel', $('#tab'));">导出</a> <table id="tab"> <thead> <tr> <th data-options="field:'flid',width:80" rowspan="2">编号</th> <th data-options="field:'flname',width:100" rowspan="2">姓名</th> <th colspan="3">详细信息</th> <th colspan="2">登录信息</th> </tr> <tr> <th data-options="field:'fladdress',width:80,align:'right'">地址</th> <th data-options="field:'flphone',width:80,align:'right'">电话</th> <th data-options="field:'flemail',width:240">邮箱</th> <th data-options="field:'flloginname',width:60,align:'center'">登录名</th> <th data-options="field:'flloginpwd',width:60,align:'center'">密码</th> </tr> </thead></table> <div id="tool"> <table border="0" cellspacing="0" cellpadding="0" width="100%" class="easyui-datagrid"> <!--<tr> <td style=" padding-left:2px"> <a href="#" class="easyui-linkbutton" id="id_add" iconcls="icon-add" plain="true" onclick="add_dg();" >添加</a> <a href="#" class="easyui-linkbutton" id="id_edit" iconCls="icon-edit" plain="true" onclick="edit_dg();">修改</a> <a href="#" class="easyui-linkbutton" id="id_cancel " onclick="delete_dg();" iconcls="icon-cancel" plain="true">删除</a> </td> </tr>--> </table> </div> <br /> <div id="dd_dg" style=" display:none"> <form id="fm_dg"> 编号:<input id="flid" name="flid" class="easyui-numberbox" type="text" required="true" missingMessage="请输入编号" /> <br /> 姓名:<input id="flname" name="flname" class="easyui-validatebox" required="true" missingMessage="请输入姓名"/> <br /> 地址:<input id="fladdress" name="fladdress" class="easyui-validatebox" type="text" required="true" missingMessage="请输入地址" /> <br /> 电话:<input id="flphone" name="flphone" class="easyui-validatebox" type="text" required="true" missingMessage="请输入电话" /> <br /> 邮箱:<input id="flMail" name="flMail" class="easyui-validatebox" type="text" validType="email" required="true" missingMessage="请输入邮箱" /> <br /> 登录名:<input id="flloginname" name="flloginname" class="easyui-validatebox" type="text" required="true" missingMessage="请输入登录名" /> <br /> 密码:<input type="password" id="flloginpwd" name="flloginpwd" class="easyui-validatebox" required="true" missingMessage="请输入密码" /> <br /> </form> </div> </body> </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值