JqGrid web打印实现代码


Posted in Javascript onMay 31, 2011

在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 用于电视机类型的设备。
Javascript 相关文章推荐
jQuery DOM操作小结与实例
Jan 07 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
TS 类型兼容教程示例详解
Sep 23 Javascript
16个最流行的JavaScript框架[推荐]
May 29 #Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 #Javascript
在JavaScript中监听IME键盘输入事件
May 29 #Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 #Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 #Javascript
最新28个很棒的jQuery 教程
May 28 #Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 #Javascript
You might like
PHP句法规则详解 入门学习
2011/11/09 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
python tornado微信开发入门代码
2018/08/24 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
Python-for循环的内部机制
2020/06/12 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
耐克美国官网:Nike.com
2016/08/01 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
铭立家具面试题
2012/12/06 面试题
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
校园之声广播稿
2014/01/31 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
《口技》教学反思
2014/02/21 职场文书
小学生元旦感言
2014/02/26 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers