JqGrid web打印实现代码
更新时间：2011年05月31日 13:01:36 作者：
最近，项目使用了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>
不同的媒介类型
注释：媒介类型名称对大小写不敏感。
打印时的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 | 用于小的手持的设备。 |
| 用于打印机。 | |
| projection | 用于方案展示，比如幻灯片。 |
| screen | 用于电脑显示器。 |
| tty | 用于使用固定密度字母栅格的媒介，比如电传打字机和终端。 |
| tv | 用于电视机类型的设备。 |
相关文章
这篇文章主要为大家详细介绍了jQuery选择器实例应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要为大家详细介绍了jQuery实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要为大家详细介绍了jQuery表单校验插件validator的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
本文给大家介绍的是一款重点突出的jQuery特效插件效果，使用jFade实现鼠标经过的图片高亮其它变暗，非常实用，推荐给小伙伴们参考下。2015-03-03
今天正好用到这个，就网上搜了搜，贴出来了。需要的朋友可以参考下。2011-03-03
Javascript jquery css 写的简单进度条控件
很多的时候用户需要等待你“臃肿”的 Javascript 代码处理完成（Web 2.0 的特色）。期间或许加入一个类似于进度条的东西让用户有点“安慰”。这个东西实现起来并不复杂，无非就是获得总的处理条目，然后获得一个百分比，再显示输出。2008-03-03
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
昨天研究了一下Jquery 模仿Baidu、Google收索时自动补充收索结果的提示，感觉效果还行，下面与大家分享下代码2013-12-12
这篇文章主要介绍了jQuery实现动态添加和删除input框，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
jquery本身的动画较之mootools，总体上感觉稍微有点逊色，不过因为其有强大的插件，加上API易读型，易用性等备受青睐，在动画效果方面，API提供了比如一些比较实用的Effects，下面是main方法animate2011-04-04
这篇文章主要介绍了jQuery实现checkbox的简单操作，对复选框组的全选、全不选、不全选，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
最新评论