JqGrid web打印实现代码

发布于 2016-12-28 00:43:22 | 160 次阅读 | 评论: 0 | 来源: 网友投递

jqGrid jQuery网格插件

jqGrid 是一个用来显示网格数据的jQuery插件，文档比较全面，附带中文版本。

最近，项目使用了JqGrid，但需要打印Grid里面的数据。使用的是CSS属性中的Media媒体类型来控制打印样式。
在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>

不同的媒介类型
注释：媒介类型名称对大小写不敏感。

媒介类型	描述
all	用于所有的媒介设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv	用于电视机类型的设备。

jqGrid jQuery网格插件

后端技术

前端技术

数据库

热门框架

常用IDE

其他