快捷導(dǎo)航

JqGrid web打印實(shí)現(xiàn)代碼

更新時(shí)間：2011年05月31日 13:01:36 作者：

最近，項(xiàng)目使用了JqGrid，但需要打印Grid里面的數(shù)據(jù)。使用的是CSS屬性中的Media媒體類型來(lái)控制打印樣式。

在IE9中打印沒(méi)有問(wèn)題，但I(xiàn)E6、7、8都會(huì)出現(xiàn)前幾頁(yè)空白的情況(只顯示列頭信息)，找了很久，才發(fā)現(xiàn)是ui-jqgrid-bdiv樣式類(在ui.jqgrid.css內(nèi))中的overflow引起的，在打印之前將其刪除，打印之后將其恢復(fù)即可。
打印時(shí)的CSS樣式如下：

復(fù)制代碼代碼如下:

 
<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> 

打印代碼：

復(fù)制代碼代碼如下:

 
$("#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%');//將其高度設(shè)置成100%,主要是為了jqgrid 中有Scroll條時(shí) 能把該scroll條內(nèi)內(nèi)容都打印出來(lái) $("#gview_jqgridlist .ui-jqgrid-bdiv").removeClass().addClass("ui-jqgrid-bdiv_self");//去除掉overflow屬性} 
function window.onafterprint() {//打印后事件 //放開(kāi)隱藏的元素 
$("#gview_jqgridlist .ui-jqgrid-bdiv_self").removeClass().addClass("ui-jqgrid-bdiv");//恢復(fù)overflow屬性，否則會(huì)導(dǎo)致jqgrid中scroll條消失 jQuery("#jqgridlist").jqGrid('setGridHeight', GridHeight);//設(shè)置成打印前的高度} 

CSS 媒體屬性介紹：
媒介類型(Media Types)允許你定義以何種媒介來(lái)提交文檔。文檔可以被顯示在顯示器、紙媒介或者聽(tīng)覺(jué)瀏覽器等等。
媒介類型
某些 CSS 屬性僅僅被設(shè)計(jì)為針對(duì)某些媒介。比方說(shuō) "voice-family" 屬性被設(shè)計(jì)為針對(duì)聽(tīng)覺(jué)用戶終端。其他的屬性可被用于不同的媒介。例如，"font-size" 屬性可被用于顯示器以及印刷媒介，但是也許會(huì)帶有不同的值。顯示器上面的顯示的文檔通常會(huì)需要比紙媒介文檔更大的字號(hào)，同時(shí)，在顯示器上，sans-serif 字體更易閱讀，而在紙媒介上，serif 字體更易閱讀。
@media規(guī)則
@media 規(guī)則使你有能力在相同的樣式表中，使用不同的樣式規(guī)則來(lái)針對(duì)不同的媒介。
下面這個(gè)例子中的樣式告知瀏覽器在顯示器上顯示 14 像素的 Verdana 字體。但是假如頁(yè)面需要被打印，將使用 10 個(gè)像素的 Times 字體。注意：font-weight 被設(shè)置為粗體，不論顯示器還是紙媒介：

復(fù)制代碼代碼如下:

 
<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> 

不同的媒介類型
注釋：媒介類型名稱對(duì)大小寫(xiě)不敏感。

媒介類型	描述
all	用于所有的媒介設(shè)備。
aural	用于語(yǔ)音和音頻合成器。
braille	用于盲人用點(diǎn)字法觸覺(jué)回饋設(shè)備。
embossed	用于分頁(yè)的盲人用點(diǎn)字法打印機(jī)。
handheld	用于小的手持的設(shè)備。
print	用于打印機(jī)。
projection	用于方案展示，比如幻燈片。
screen	用于電腦顯示器。
tty	用于使用固定密度字母柵格的媒介，比如電傳打字機(jī)和終端。
tv	用于電視機(jī)類型的設(shè)備。