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 相关文章推荐
js变量作用域及可访问性的探讨
Nov 23 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
vue实现百度搜索功能
Dec 28 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 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 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
js实现开关灯效果
2020/03/30 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
React实现全选功能
2020/08/25 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
简单理解Python中的装饰器
2015/07/31 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Django 自定义分页器的实现代码
2019/11/24 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
校园广播稿500字
2014/02/04 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
2014年财务科工作总结
2014/11/11 职场文书
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL