JqGrid web打印实现代码 |
||||||||||||||||||||||
|
本文标签：JqGrid,web打印 在IE9中打印没有问题，但IE6、7、8都会出现前几页空白的情况(只显示列头信息)，找了很久，才发现是ui-jqgrid-bdiv样式类(在ui.jqgrid.css内)中的overflow引起的，在打印之前将其删除，打印之后将其恢复即可 。 打印时的CSS样式如下： 复制代码 代码如下: <style type="text/css" media="print"> #accordion h3, #vcol, div.loading, div.ui-tabs-hide,ul.ui-tabs-nav li, td.HeaderRight { display:none } .ui-jqgrid-titlebar, .ui-jqgrid-title{ display:none } .ui-jqgrid-bdiv_self{position: relative; margin: 0em; padding:0; text-align:left;} #pager{display:none; z-index:-1;} </style> 打印代码： 复制代码 代码如下: $("#btnPrint").live("click", function () { window.focus(); window.print(); return false; }); var GridHeight; function window.onbeforeprint() { //打印前事件 var jqgridObj=jQuery("#jqgridlist"); GridHeight = jqgridObj.jqGrid(getGridParam, height);//获取高度 jqgridObj.jqGrid(setGridHeight, 100%);//将其高度设置成100%,主要是为了jqgrid 中有Scroll条时 能把该scroll条内内容都打印出来 $("#gview_jqgridlist .ui-jqgrid-bdiv").removeClass().addClass("ui-jqgrid-bdiv_self");//去除掉overflow属性} function window.onafterprint() {//打印后事件 //放开隐藏的元素 $("#gview_jqgridlist .ui-jqgrid-bdiv_self").removeClass().addClass("ui-jqgrid-bdiv");//恢复overflow属性，否则会导致jqgrid中scroll条消失 jQuery("#jqgridlist").jqGrid(setGridHeight, GridHeight);//设置成打印前的高度} CSS 媒体属性介绍： 媒介类型(Media Types)允许你定义以何种媒介来提交文档 。文档可以被显示在显示器、纸媒介或者听觉浏览器等等 。 媒介类型 某些 CSS 属性仅仅被设计为针对某些媒介 。比方说 "voice-family" 属性被设计为针对听觉用户终端 。其他的属性可被用于不同的媒介 。例如，"font-size" 属性可被用于显示器以及印刷媒介，但是也许会带有不同的值 。显示器上面的显示的文档通常会需要比纸媒介文档更大的字号，同时，在显示器上，sans-serif 字体更易阅读，而在纸媒介上，serif 字体更易阅读 。 @media规则 @media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介 。 下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体 。但是假如页面需要被打印，将使用 10 个像素的 Times 字体 。注意：font-weight 被设置为粗体，不论显示器还是纸媒介： 复制代码 代码如下: <html> <head> <style> @media screen { p.test {font-family:verdana,sans-serif; font-size:14px} } @media print { p.test {font-family:times,serif; font-size:10px} } @media screen,print { p.test {font-weight:bold} } </style> </head> <body>....</body> </html> 不同的媒介类型 注释：媒介类型名称对大小写不敏感 。
|
