JqGrid web打印实现代码
JqGrid web打印实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:在IE9中打印没有问题,但IE6、7、8都会出现前几页空白的情况(只显示列头信息),找了很久,才发现是ui-jqgrid-bdiv样式类(在...

在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教程学习
热门Javascript教程学习
编程开发子分类