DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> JqGrid web打印實現代碼
JqGrid web打印實現代碼
編輯:JQuery特效代碼     
在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 用於電視機類型的設備。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved